css - 粘性页眉和页脚

Question

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

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

例如，我发现具有 position="relative" 的元素存在问题，例如选项卡和“Patricia signed...”框项。

.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用于body/#page。

在我的示例中，您只需要页眉和页脚的固定高度

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