html - div的动态高度分配

Question

我有一个高度为 75% 的外部 div。我有一个内部可滚动的 div A 和另一个内部可滚动的 div B。div B 可以动态删除，它的高度可变，最大高度。我想让 div A 根据 div B 自动调整它的高度。

#outer {
  position: fixed;
  bottom: 0;
  left: 100px;
  height: 500px;
  width: 350px;
  background-color: gray;
}

#header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 44px;
  background-color: blue;
  color: white;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 44px;
  background-color: red;
  color: white;
}

#content {
  position: absolute;
  top: 44px;
  overflow-y: scroll;
  padding: 20px;
  height: 200px;
}

#dynamic-content {
  max-height: 150px;
  overflow-y: scroll;
  padding: 10px;
  position: absolute;
  bottom: 44px;
}

我正在寻找一种纯 css 方法

这是一个 jsFiddle:https://jsfiddle.net/6tr081hb/

Answer 1

我会创建一个 flex 容器，这样您可以通过将 flex 属性设置为动态内容的固定高度和内容的可调整高度1。

检查 jsfiddle .

我还删除了内容的绝对定位，并向 outer div 添加了一个 padding。