底部 div 以垂直滚动占用剩余空间答案

【问题标题】：Bottom div to occupy remaining space with vertical scroll底部 div 以垂直滚动占用剩余空间
【发布时间】：2021-04-08 21:24:11
【问题描述】：

.ListContainer {
     overflow-y: scroll;
     height: 500px;
    }

    <h1>Some header</h1>
    <div>Some panel</div>
    <div class="ListContainer">ui-office-fabric grid here</div>

我需要让 ListContainer div 占据垂直空间的其余部分直到底部，因此在该 div 内滚动会显示隐藏的项目。固定高度不好，因为显示器有不同的分辨率。所以分辨率越高，div下面就会有一个空格。

我尝试指定高度：calc(100% - 240px) 但没有效果。

有什么建议吗？

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

这就是你的意思？

height: calc(100vh - 240px);

【讨论】：

height: calc(100vh - 240px) 没有帮助。现在计算的 css 属性中的高度（在 Chrome 的开发工具中）显示 ~ 2200px。不过，Div 并不将内容限制为剩余的 html 页面。而是出现浏览器的垂直滚动条。

【解决方案2】：

您需要一个具有所需高度的容器，在本例中为 100vh。然后，您可以使用 flexbox，并确保您的列表容器根据需要增长。

.main {
  height: 100vh;
  border: 1px solid red; /** This is just for testing **/
  display: flex;
  flex-direction: column;
}

.ListContainer {
   overflow-y: scroll;
   border: 1px solid black; /** This is just for testing **/
   flex-grow: 1;
}

<div class="main">
  <h1>Some header</h1>
  <div>Some panel</div>
  <div class="ListContainer">
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
  </div>
</div>

【讨论】：

现在看起来更近了，谢谢。我简化了布局。实际上，我在顶部还有更多。如果我将 .main 限制为高度：70vh，它适合 27" 显示器，但在 21" 显示器上我会得到一点浏览器滚动。
看来我想“跳过”的顶级内容是 300 像素。但是 height: calc(100% - 300px) 不计算剩余空间。
如果你能用小提琴或codepen复制问题，我可以看看:)