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％，总之％不工作，而不是像素，即200px等，但我想中间部分是100％ http://jsfiddle.net/RyDAw/

Answer 1

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

Answer 2

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