html - 响应式滚动 div 高度

Question

我有一个固定的页脚。我有一个相对的标题。在这些容器之间有设置为 overflow-y:auto 的内容。这意味着滚动条应该只显示在这个 div 容器中。我有一个围绕这个内容 div 的容器。这个 div 的高度设置为像素，因为当使用百分比时，它会自动变为 100% 并且滚动条不可见。在不改变屏幕高度的情况下，它在 100% 上看起来很完美。但是，如果用户要更改屏幕的高度 - 用户无法看到 div 中的所有内容，因为固定页脚现在覆盖了它。当用户缩小时，页脚和 div 之间有一个空白区域。我希望这样当用户缩小时没有空白区域并且当用户更改屏幕高度时，用户可以查看所有内容。

HTML

<div class="top-container">
 </div>
<div class="container">
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
<footer>

</footer>

CSS

.top-container {
position: relative;
z-index: 6;
background: #fff;
padding: 40px 40px 0;
bottom: 0; 
width: 100%
}
.container {
padding: 10px 0;
margin: 0 .6%;
}
ul {
padding-top: 2px;
height: 437px;
overflow-y: auto;
overflox-x: hidden;
}
footer{
 background: #fff;
padding: 20px 50px;
overflow: hidden;
position: fixed;
z-index: 5;
left: 0;
bottom: 0;
width: 100%;
}

JSFIddle这个 JSfiddle 没有准确显示我的问题。滚动条应该只显示在内容中而不是标题中。现在就是这样。

谢谢

Answer 1

.top-container {
  position: relative;
  z-index: 6;
  background: #fff;
  padding: 40px 40px 0;
  bottom: 0; 
  width: 100%;
  max-height: 60px;
  background: green;
}
.container {
  padding: 10px 0;
  margin: 0 .6%;
  overflow-y: scroll;
  height: calc(100vh - 100px);
  background: blue;
}
ul {
  padding-top: 2px;
  height: 437px;
  overflow-y: auto;
  overflox-x: hidden;
}
footer{
  background: #fff;
  padding: 20px 50px;
  overflow: hidden;
  position: fixed;
  z-index: 5;
  left: 0;
  bottom: 0;
  width: 100%;
}
body{
  max-height: 90vh;
  }
footer{
  background: red;
  max-height: 40px;
}

<div class="top-container">

</div>
<div class="container">
  <ul>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>
</div>
<footer>

</footer>

这是更新的 jsFiddle