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容器，这样您就可以通过将1属性设置为padding来为动态内容和内容调整高度设置固定高度。

检查jsfiddle。

我还删除了内容的绝对定位，并在outer div中添加了{{1}}。

div的动态高度分配

1 个答案: