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

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>