Question

我正在尝试在我的模板上使用粘性页眉和页脚，但是我有一个问题，即id =“page”并不总是在标题下滚动！

作为一个例子，我看到有一个问题，即具有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 /＃页。

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

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

粘页眉和页脚

2 个答案: