1

我最近发布了我的新网站，但在更大的分辨率显示器上，我的第二个内容 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;
}
4

4 回答 4

0

你可以给wrapper元素background和底部box-shadow一样的元素content2。然后它看起来像content2延伸到底部。你也必须给它同样的width 

#wrapper {
    width: 90%;
    min-width: 1000px;
    background: #808080;
    -moz-box-shadow: inset 0 -8px 8px -8px #000000;
    -webkit-box-shadow: inset 0 -8px 8px -8px #000000;
    box-shadow: inset 0 -8px 8px -8px #000000;
}

box-shadow现在您从元素中移除底部content2并为content元素提供白色背景

#content {
    background: #FFFFFF;
}

#content2 {
    -moz-box-shadow: inset 0 8px 8px -8px #000000;
    -webkit-box-shadow: inset 0 8px 8px -8px #000000;
    box-shadow: inset 0 8px 8px -8px #000000;
}

查看修改后的 JSFiddle

于 2013-11-09T15:49:08.527 回答
0

在这种情况下，由于body和#wrapper具有 100% 的高度，因此您不能将高度百分比指定给子元素。如果您将固定高度（即高度百分比）赋予#wrapper.

您可以给 灰色颜色body和给白色颜色#content。

于 2013-11-09T14:24:26.743 回答
0

在您的 content2 中添加position: absolute ...我希望您会想要这样...

 #content2
    {
        position:absolute;
        width: 90%;
        min-width: 1000px;
        height: auto;
        min-height: 100%;
        padding: 60px 5% 20px 5%;
        background: #808080;
        overflow: hidden;
    }
于 2013-11-09T14:28:31.073 回答
0

看看这个：http: //jsfiddle.net/XUuVL/2/ 。使用position: absolute;和bottom: 0;解决您的问题

于 2013-11-09T14:33:53.893 回答