Question

即使将内容设置为100％高度

，内容也不会填满整个页面

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;将上述元素排除在外自然页面流程！

Answer 2

html, body需要height:100%; min-height:100%。 content div也需要min-height:100%。在这里小提琴：http://jsfiddle.net/SB67f/6/

Answer 3

如果您的意思是内容div，则需要高度：100％以及html和正文

div#content {
    height:100%;
    padding-top:20px;
    padding-bottom: 20px;
    background: #dcf0f7;
}

http://jsfiddle.net/SB67f/5/

Answer 4

http://jsfiddle.net/SB67f/7/

*
{
    margin:0px;
    padding:0px;
}
html
{
    height:100%;
}
body
{
    height:100%;
}
div#content
{
    padding-top:20px;
    padding-bottom: 20px;
    background: #dcf0f7;
    height:inherit;
}
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;
}

取代最小高度：100％;高度：100％;在body上设置div＃content height as inherit

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

4 个答案: