粘性頁眉和頁腳

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; 
} ​