Question

请看一下这段代码

HTML

<div id="wrapper">
     <div id="header">
         <div id="header_inner">

         </div>
     </div>

     <div id="contentliquid">
         <div id="content">
             asdasdasdas   
         </div>
     </div>

     <div id="footer">
         <div id="footer_inner">
         </div>
     </div>

 </div>

CSS：

body, html{
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333;
}

p {
    padding: 10px;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
}

#header {
    float: left;
    height: 237px;
    width: 100%;
}

#header_inner {
    float: left;
    height: 166px;
    width: 60%;
    top:30%;
    position:relative;
    background: #ff0000;
}

#contentliquid {
    float: left;
    width: 100%;
}

#content {
    width: 100%;
    background: #051f3b;
    height:304px;
}

#footer {
    height: 150px;
    width: 100%;
    clear: both;
}

#footer_inner {
    height: 100%;
    width: 60%;
    background: #c0db09;
    clear: both;
    float:right;
}

蓝色的中间部分应该是100％的高度，页脚应该在底部。当前中间部分没有设置为100％，在短时间内不工作而不是px即200px等。但我希望中间部分是100％ http://jsfiddle.net/RyDAw/

Answer 1

您正尝试在浮动元素上设置100％的高度。由于浮动元素是“提取”DOM流，因此无法以％为单位定义它们的大小。尝试从float: left中移除#content_liquid，您应该可以使用％作为高度。

Answer 2

CSS

body, html{
 margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333;


}

p {
    padding: 10px;
}

#wrapper {
    width: 100%;

    margin: 0 auto;
}

#header {
    float: left;
    height: 237px;
    width: 100%;

}

#header_inner {
    float: left;
    height: 166px;
    width: 60%;
    top:30%;
    position:relative;
    background: #ff0000;
}

#contentliquid {
    float: left;
    width: 100%;

}

#content {
    width: 100%;
    background: #051f3b;
    min-height:304px;
    height:100%;
    position:absolute;
}

#footer {
    height: 150px;
    width: 100%;
    clear: both;

}

#footer_inner {
    height: 100%;
    width: 60%;
    background: #c0db09;
    clear: both;
    float:right;}

CSS问题100％流体高度不起作用

2 个答案: