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%，简而言之，没有工作的百分比，而不是像素i-e 200px等等。但我希望中间部分是100%http://jsfiddle.net/RyDAw/

Answer 1

您正试图在浮动元素上设置100%的高度。由于浮动元素是从DOM流中"提取"出来的，所以不能用%来定义它们的大小。尝试从#content_liquid中删除float: left，您应该能够使用%作为高度。

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;}