Question

我在父级中有两个div（弹出菜单），两个div都需要具有动态高度。第二个div位于绝对底部。我需要顶部div来滚动它不适合父节点中的第二个div。第二个div应始终获得所需的高度。

我的（简体）HTML：

<div id="parent">
   <div id="top-div">
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link... etc</li>
   </div>
   <div id="bottom-div">
      <p>Needs dynamic height since it sometimes contains</p>
      <span>ERROR MESSAGES</span>
   </div>
</div>

https://jsfiddle.net/4032o8bj/

我已经四处寻找解决方案，但是找不到我可以逃脱的地方，没有设置#top-div或#bottom-div的高度。 #parent为height: 100%; position: fixed;

Answer 1

如果您不必支持旧浏览器，则可以使用flex布局：

添加到

#parent {
  ....      
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
#top-div {
  ...
  overflow-y:scroll;
}

删除底部div的绝对定位：

#bottom-div {
  background-color: blue;
}

小提琴：https://jsfiddle.net/41udrh4y/

使用动态高度页脚滚动动态高度div

1 个答案: