html - 如何使屏幕上剩余空间的全高

Question

我最近发布了我的新网站，但在更大的分辨率下，我的第二个内容 div 位于我的导航下方，一小段文本仅扩展到其中内容的大小，这很好，除了有一个页面内容很少，这意味着它和页脚之间有一个很大的白色部分。

这是一个演示:http://jsfiddle.net/XUuVL/

我在想我怎样才能让灰色区域填充它下面留下的空白。

干杯。

html,body 
{
    background: #FFFFFF;
    font: 0.74em Arial;
    height: 100%;
}

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto 0;
}

#content
{
    width: 90%;
    min-width: 1000px;
    height: 100%;
    padding: 20px 5% 20px 5%;
    padding-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

#content2
{
    width: 90%;
    min-width: 1000px;
    height: auto;
    min-height: 100%;
    padding: 60px 5% 20px 5%;
    background: #808080;
    overflow: hidden;
}

Answer 1

在这种情况下，由于 body 和 #wrapper 的高度为 100%，因此您不能以百分比形式为子元素指定高度。如果您给 #wrapper 固定高度，即高度的百分比，它将起作用。

您可以为 body 赋予灰色，为 #content 赋予白色。