固定的页眉和页脚的问题

我目前在一个网站的设计工作使用960网格系统并在设计的最后时刻遇到了一个小障碍来了。最后，我只想把我的页眉和页脚酒吧在页面上被“固定”，所以他们将继续即使在页面的其余部分滚动平稳。这是一个固定导航栏的好例子。 http://ryanscherf.net/ 矿不会是垂直的，但你明白了吧。固定的页眉和页脚的问题

，我对面来的问题是，头完美的作品，并正好我怀疑它会的方式。这里是我的头

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

和CSS，使其伸展并固定位置

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

此解决方案正是我想要的太多的方式HTML。但是，当我将相同的确切设置应用于页脚时，会导致不希望的结果。这里是一个小提琴，以显示我的意思。您将不得不取消注释脚注的“position：fixed”行，以了解我的意思。 http://jsfiddle.net/s4cWP/ 和全屏 http://jsfiddle.net/s4cWP/embedded/result/

其值得注意的是，除了用我自己的CSS（位于的jsfiddle上方！），我使用的是960复位电网和960列12样式表。

我真的很感激，在正确的方向推。这里有没有什么可以解释的吗？

谢谢！

来源

2013-03-02 onTheInternet

我假设你想要的页脚总是出现像头：JSFiddle。

新#footer的：

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

此外，由于重叠，我添加填充到#container的底部：

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

来源

2013-03-02 17:17:18

这是一个完美的解决方案！我猜底部：0;并留下：0;做到了。这两件事究竟做了什么？ – onTheInternet 2013-03-02 17:34:28

@onTheInternet它们定义元素的位置。由于#footer被设置为'position：fixed'，它相对于视口处于固定位置，如果您未指定位置，则默认为'position：static'行为，除非另行指定，否则这是每个元素的默认行为。 – 2013-03-02 18:19:45

固定的页眉和页脚的问题

回答

相关问题