CSS:页面内容未填满整个屏幕

Question

即使设置为 100% 高度，内容也不会填满整个页面

这是代码。 http://jsfiddle.net/SB67f/1/

HTML:

<div id="head">
</div>
<div id="content">
    <div class="box">1
    </div>
    <div class="box">2
    </div>
    <div class="box">3
    </div>
    <div class="box">4
    </div>
</div>
<div id="footer">
</div>

CSS:

*
{
    margin:0px;
    padding:0px;
}
html
{
    height:100%;
}
body
{
    min-height:100%;
}
div#content
{
    padding-top:20px;
    padding-bottom: 20px;
    background: #dcf0f7;
}
div#head
{
    position:fixed;
    z-index:999;
    top:0px;
    left:0px;
    background:#5e9dc8;
    width:100%;
    height:20px;
}
div#footer
{
    position:fixed;
    z-index:999;
    bottom:0px;
    left:0px;
    background:#5e9dc8;
    width:100%;
    height:20px;
}
div#content div.box
{
    background:#0c2c52;
    color:white;
    height:15px;
    width:300px;
    margin: 5px auto;
}

我不明白为什么没有覆盖整个屏幕，而是只到达其中的最后一个元素。

Answer 1

您需要为 html 和 body 元素设置高度:

html,body {
    height:100%;
}

同时将#content div 的高度设置为 100%:

div#content {
height:100%;
}

http://jsfiddle.net/SB67f/2/

请记住，因为您已将页眉和页脚设置为 position:fixed;，将您的 #content div 设置为 100% 高度将导致一些垂直溢出，因为position:fixed; 将上述元素从自然页面流中移除!