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

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

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

.dvContentContainer1 {
    padding-top: 30px;
}

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

看到这个updated fiddle

编辑：如果你从body标签中删除height: 100%;，如果内容没有超出屏幕的高度，滚动条就会消失。

看到这个updated fiddle 2