Question

我目前正在使用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;*/
}

此解决方案的工作方式与我想要的完全相同。但是，当我对页脚应用相同的确切设置时，会导致不希望的结果。这是一个显示我的意思的小提琴。您将不得不取消注释页脚的“position：fixed”行以查看我的意思。 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;
}

修复了页眉和页脚问题

1 个答案: