我正在尝试构建一个布局，在屏幕底部有一个固定的 DIV，另一个 DIV 及其内容应该是可滚动的。
我希望第一个 DIV 是动态的，这意味着显示在其中的子元素的高度可以增长，并且它们应该在屏幕高度的 80% 处可见。
另一个 DIV 应该是固定的，并且始终是屏幕(窗口)高度的 20%。
固定 DIV 很容易用 position:fixed 实现，但 mainContent DIV 与底部 DIV 重叠。为此，我在正文中添加了 padding-bottom。
我想要实现的是，上层 (mainContent) div 的最小高度/高度应始终保持在底部 DIV 的顶部。
我在这里添加了我的代码 http://jsfiddle.net/hp2b64ot/3/ .
最佳答案
根据您的支持，您可以使用 vh 单位，这意味着:
body {padding-bottom: 20vh;}
.fixed {height: 20vh}
关于javascript - CSS/HTML - 使固定 div 占据屏幕的 20%，另一个可滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26800335/