固定页眉/页脚保持垂直滚动条在顶部？

Question

我有一个部分透明的固定页脚和带有滚动内容的标题：https://jsfiddle.net/ru8jgxg9/

当存在溢出内容时，需要对JSFiddle进行哪些更改以使垂直滚动条保持在顶部（但是滚动条也保持窗口的整个高度）？

我注意到stackoverflow.com似乎能够做到这一点：

html {
  height: 100%;
}

body {
  height: 100%;
}

/* Fixed Header */
.dvTableTop {
  display: table;
  width: 100%;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-color: #000000;
  top: 0px;
  height: 50px;
  position: fixed;
  left: 0;
  right: 0;
  opacity: 0.7;
  background-color: Red;
  z-index: 1030;
}

/* Scrollable Content */
.dvContentContainer1 {
  position: fixed;
  top: 0;
  bottom: 0;
  padding-top: 30px;
  overflow: auto;
  left: 0;
  right: 0;
}


/* Fixed Footer */
.dvFooterContainer1 {
  position: fixed;
  height: 50px;
  background-color: Yellow;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
}

Answer 1

您的固定页眉和页脚需要位于滚动容器内。目前，它们位于内容容器之外，并将与其滚动条重叠。

此外，您的内容容器不能有position: fixed，否则它将与其他固定元素争夺位置并导致重叠。固定元素始终相对于文档而不是容器。

以下是一个工作示例。

body {
  margin: 0;
  padding: 0;
  
  font-family: arial, helvetica, san-serif;
}

.content {
  height: 1000px;
  
  background: linear-gradient(45deg, blue, red);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  
  background: rgba(0, 255, 0, 0.5);
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  
  background: rgba(0, 255, 0, 0.5);
}

<div class="content">
  <div class="header">Header</div>
  <div class="footer">Header</div>
</div>

Answer 2

我很困惑为什么你这样做。您所要做的就是从position: fixed中移除.dvContentContainer1，如此

.dvContentContainer1 {
    padding-top: 30px;
}

只要内容超出页面底部，它就会按照你想要的方式工作。

请参阅此updated fiddle

编辑：如果从正文标记中删除height: 100%;，如果内容未超出屏幕高度，滚动条将会消失。

请参阅此updated fiddle 2