Question

我们必须支持IE，Chrome和Firefox的最后两个版本，我觉得这对IE 7/8来说是不可能的，但也许我错过了一些东西

我的页脚在内容区域后面移动了-280px。此内容区域在标题区域上向上移动-230px。因此，我的页面底部有一个约320px的空白区域。我可以填充这个并使它看起来像渐变的底端，但我真的宁愿把它剪掉，所以没有任何滚动条。

在下面的示例代码中 -

<div id = "page">
    <div id = "topbar">
    </div>
    <div id = "header">
    </div>
    <div id = "content">
    </div>
</div>
<div id = "footer">
    I AM THA FOOTAH<br/> So much cooler than the header these days
</div>
body
{
/*  background-color: #040e22; */
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}

div
{
    display: block;
}


#page
{
    background-color: white;
    margin: 0px auto;
    padding: 0px;   
    position: relative;
}

#topbar
{
    height: 60px;
    background-color: #112247;
    color: white;
    position: static;
}

#header
{
    background-color: navy;
    color: yellow;
    height: 240px;
    position: relative;
}

#content
{
    min-height: 280px;
    background-color: green;
    width: 480px;
    margin: auto;
    position: relative;
    top: -230px;
    z-index: 1;
    height: 2000px;

}

#footer
{
    /*background: url("footerGradient.png") repeat-x 50% 0%;*/
    background-color: navy;
    color: white;
    text-align: center;
    padding-top: 60px;
    height: 220px;
    top: -280px;
    position: relative;
}


.inner
{
    width: 940px;
    margin: auto;
}

如何摆脱海军页脚下的白色？

Answer 1

只需将#footer从top: -280px更改为margin-top: -280px瞧！

位置相对将相对于其原始位置移动元素，但将保持其空间，从而渲染空白区域，负边距将移动您的元素，包括其边界空间，并将执行您需要的。

Answer 2

您可以将页脚位置从相对位置更改为静态，如下所示：

#footer
{
    /*background: url("footerGradient.png") repeat-x 50% 0%;*/
    background-color: navy;
    color: white;
    text-align: center;
    padding-top: 60px;
    height: 220px;
    bottom: 0px;
    width: 100%;
    position: fixed;
}

Answer 3

你可能想看看这个sticky footer page - 你可以修改那个技术，不要使页脚的高度和前一个元素的负边距相同;你希望负边距更大。

滚动条到空 - 我如何缩短页面？

3 个答案: