html - CSS 问题 100% 流体高度不起作用

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: leftfrom #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;}