0

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

我遇到的问题是标题完美地工作，并且正是我怀疑的方式。这是我的标题的 HTML

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

和 css 使它伸展并固定位置

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

这个解决方案也完全按照我想要的方式工作。但是，当我将相同的确切设置应用于页脚时，会导致不希望的结果。这是一个小提琴来说明我的意思。您必须取消注释页脚的“位置：固定”行才能看到我的意思。 http://jsfiddle.net/s4cWP/ 和全屏 http://jsfiddle.net/s4cWP/embedded/result/

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

我真的很感激朝着正确的方向前进。这里有什么我没有考虑的吗？

谢谢！

4

1 回答 1

1

我假设您希望页脚始终显示为页眉：JSFiddle。

新#页脚：

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

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

#container
{
    padding-top:75px;
    padding-bottom:30px;
}
于 2013-03-02T17:17:18.297 回答