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

Question

 .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 占据垂直空间的 rest 直到底部，因此在该 div 内滚动会显示隐藏的项目。 固定高度不好，因为显示器有不同的分辨率。 所以分辨率越高，div下面就会有一个空白区域。

我尝试指定 height: calc(100% - 240px) 但它没有效果。

有什么建议么？

Answer 1

这就是你的意思？

height: calc(100vh - 240px);

Answer 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>