Question

enter image description here 我需要为右侧边栏，主要内容和左侧边栏修复100％页面包装的高度。任何的想法..？下面是我的css文件。我在页面包装器中使用了一个名为clearfix的类，但是高度并不固定.100％不准确，因为我还需要页眉和页脚包装器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>e-support-uop</title>

    <!-- styling files  -->

    <link href="reset.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
    <div id="page-wrapper" class="clearfix">
        <div id="header">0</div>
        <div id="left_sidebar">
            <br/>
            1
        </div> <!--end left_sidebar -->

        <div id="main_contents">
            <br/>
            2
        </div>
        <div id="right_sidebar">
            <br/>
            3
        </div> <!--close right_sidebar -->
        <div id="footer-wrapper"> <!-- footer -->
            4
        </div> <!-- end footer -->
    </div><!--close page-wrapper-->
</body>

</html>

这是我的css文件：

html, body{
  margin: 0;
  height:100%;
}
html {
  height: 100%;
}

.clearfix{
   min-height: 1%;
   _height: 1%;   /*ie6*/
}

.clearfix:after{
  clear: both;
  display: block;
  content: "";
}

body {
  min-height: 100%;
  height: 100%;
  background-color:#d2c7fd;
  font-size:14px;
}

#page-wrapper {
  position: relative;

  background-color: #E4E6EB;
  width: 800px;
  min-height: 80%;
  height: auto !important;
  margin: 5px auto 0;
}

#header {
  width: 800px;
  height: 100px;
 }

#left_sidebar {
  position: relative;
  float: left;
  width: 20%;
  min-height: 100%; /*height: auto !important;

  */

  height: 100%;
  background-color: green;
  word-wrap: break-word;
}

#main_contents {
  position: relative;
  float: left;
  width: 55%;
  height: 90%; /*height: auto !important;

  /* height: 100%;
   */
  margin-left: 20px;
  margin-right: 20px; /*background-color: red;
  */
  word-wrap: break-word;
  /*display: table-row;*/
  overflow:hidden;
}

#right_sidebar {
  position: relative;
  float: left;
  width: 20%;
  min-height: 100%;
  height: auto !important;
  height: 100%; /*background-color: yellow;
  */
  word-wrap: break-word;
}

#footer-wrapper {
  position:absolute;
  bottom:-100px;
  left:0;
  width:100%;
  height: 100px;
  background-color: #d8d8d6;
  border-top-style: solid;
  border-width: 1px;
  border-color: #E0E0E0;
  /*padding-bottom: 20px;*/
}

Answer 1

这是一种方法。

我通过添加.main-wrap来包装浮点数，对您的HTML做了一些修改。

<div id="page-wrapper">
    <div id="header">0</div>
    <div id="main-wrap">
        <div id="left_sidebar">1</div><!--end left_sidebar -->
        <div id="main_contents">2</div>
        <div id="right_sidebar">3</div><!--end right_sidebar -->
    </div><!-- end main-wrap -->
    <div id="footer-wrapper">4</div><!-- end footer -->
</div><!--close page-wrapper-->

这是CSS：

html, body {
    height: 100%;
}
body {
    margin: 0;
}
#page-wrapper {
    height: 100%;
    min-height: 300px; /* optional */
    width: 800px;
    margin: 0 auto;
    position: relative;
}
#header {
    position: relative;
    top: 5px;
    height: 100px;
    background-color: pink;
 }
#main-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 105px;
    bottom: 100px;
    background-color: yellow;
}

#left_sidebar {
    float: left;
    width: 20%;
    height: 100%;
    background-color: green;
}

#main_contents {
    float: left;
    width: 55%;
    height: 100%;
    margin-left: 20px;
    margin-right: 20px;
    background-color: red;
}

#right_sidebar {
    float: left;
    width: 20%;
    height: 100%;
    background-color: lightblue;
}

#footer-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #d8d8d6;
}

请参阅演示小提琴：http://jsfiddle.net/audetwebdesign/xMNUv/

诀窍是将#page-wrapper扩展到视口的整个高度。将顶部和底部边距设置为零以防止垂直滚动。

#header和#footer-wrapper的高度均为100px，因此您现在可以使用绝对定位来拉伸main-wrap以填充页眉和页脚元素之间的空间。

如果需要，您可以在标题上使用position: relative在顶部打开一些空白区域。

在#main-wrap中，您现在可以浮动侧边栏和内容元素以形成3列布局。应用height: 100%以使浮动元素填满#main-wrap高度。

您可能希望向#page-wrapper添加最小高度值，以防止列崩溃。

根据您的内容，浮动列可能会溢出，因为它们的高度受视口高度的限制。您可能需要根据需要将overflow: auto添加到浮动元素。

Answer 2

除非您在父元素上设置固定高度，否则不能这样做，这可能是您不想要的。

如果您不关心IE 7及更低版本，则可能需要使用

display: table-cell

工作示例：http://codepen.io/anon/pen/fikct

无法使用浮动元素修复父级100％的高度

2 个答案: