html - Overflow-y auto 在这种情况下不起作用

Question

我遇到了 overflow-y: auto 的问题。我得到了一个按我想要的方式工作的 div:用一个页眉和一个页脚将内容限制在其最大高度，并在缩小视口(viewport)时分别在顶部和底部保持可见，我唯一无法开始工作的是滚动条在内容中间。我可以让一个 div 滚动，但不能使用这种页眉/页脚行为。请帮忙。

这是代码。抱歉，如果不够干净:

html {
  height: 100%;
}
body {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 20px;
  color: #3d5266;
  margin: 12px;
  background: lightblue;
}
#container {
  max-width: 800px;
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 24px);
  border-radius: 6px;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.2);
  margin: auto;
}
header, footer {
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fff;
  z-index: 5;
  outline: 1px solid rgba(0,0,0,0.1);
  padding: 0 8px 0 8px;				
}
header {
  top: 0;
  border-radius: 6px 6px 0 0;		
}
footer {
  bottom: 0;		
  border-radius: 0 0 6px 6px;	
}
section {
  margin: 40px 0;
}
.content {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  padding: 8px;
}
</style>

<div id="container">
  <header>
    header text
  </header>
  <section>
    <div class="content">

      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>

    </div>
  </section>
  <footer>
    footer text
  </footer>
</div>

Answer 1

为了使滚动起作用，您必须为内容元素提供完美的高度。

高度:计算(100vh - 24px - 40px - 40px);

html {
  height: 100%;
}
body {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 20px;
  color: #3d5266;
  margin: 12px;
  background: lightblue;
}
#container {
  max-width: 800px;
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 24px);
  border-radius: 6px;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.2);
  margin: auto;
}
header, footer {
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fff;
  z-index: 5;
  outline: 1px solid rgba(0,0,0,0.1);
  padding: 0 8px 0 8px;				
}
header {
  top: 0;
  border-radius: 6px 6px 0 0;		
}
footer {
  bottom: 0;		
  border-radius: 0 0 6px 6px;	
}
section {
  margin: 40px 0;
}
.content {
  position: relative;
  height: calc(100vh - 24px - 40px - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  padding: 8px;
}
</style>

<div id="container">
  <header>
    header text
  </header>
  <section>
    <div class="content">

      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      aaaabla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>

    </div>
  </section>
  <footer>
    footer text
  </footer>
</div>