html - 修复了页眉和页脚问题

Question

我目前正在使用 960 网格系统进行网站设计，在设计的最后时刻遇到了一个小问题。最终，我只想将页眉和页脚栏设置为“固定”在页面上，这样即使页面的其余部分正在滚动，它们也将保持静止。这是固定导航栏的一个很好的例子。 http://ryanscherf.net/我的不会是垂直的，但你明白了。

我遇到的问题是标题工作得很好，而且完全符合我的预期。这是我的 header 的 HTML

<div id="header">
    <p>
        ATS Logo
    </p>
</div><!--end header-->

和使它拉伸(stretch)和固定位置的css

 #header
{
background:grey;
width:100%;
height:65px;
position:fixed
/*padding:15px;*/
}

这个解决方案也完全按照我想要的方式工作。但是，当我对页脚应用完全相同的设置时，会导致不良结果。这是一个 fiddle 来展示我的意思。您必须取消注释页脚的“位置:固定”行才能明白我的意思。 http://jsfiddle.net/s4cWP/和全屏 http://jsfiddle.net/s4cWP/embedded/result/

值得注意的是，除了使用我自己的 css(位于 jsFiddle 的顶部!)，我还使用了 960 重置网格和 960 12 列样式表。

如果能朝着正确的方向插入，我将不胜感激。这里有什么我没有考虑到的吗？

谢谢!

Answer 1

我假设您希望页脚始终像页眉一样显示:JSFiddle .

新#footer:

#footer
{
    background:grey;
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
}

此外，由于重叠，我在#container 的底部添加了填充:

#container
{
    padding-top:75px;
    padding-bottom:30px;
}