粘性页眉和页脚

Question

我想在我的模板上有一个粘性页眉和页脚，这可行，但我有一个问题，即id =“page”并不总是在页眉下滚动！

这里是网站，http://zmgc.net/

我看到有一个与具有位置元素的问题=“相对”，如标签和“帕特里夏签署...”框项目，作为一个例子。

.box ul.supports-list li.last { 
    width: 200px; 
    position: relative; 
    float: left; 
} 

我该如何修复id =“page”，以便其中的所有元素始终在页眉和页脚下滚动？

Answer 1

设置的z-index像这样的标题：

#hd{ 
z-index: 10000; 
} 

Answer 2

使用position:fixed为的#header和#footer的，并overflow:hidden/auto身体/＃页。

在我的例子，你只需要一个页眉和页脚

jsFiddle

body{ 
    margin:0; 
    padding:30px 0 40px 0; 
    overflow:hidden; 
} 
#header{ 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:40px; 
    background: red; 
} 
#footer{ 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    height:60px; 
    background: blue; 
} 
#page{ 
    overflow:auto; 
    height:100%; 
    background: green; 
} ​