一个div动态高度一个div剩余高度和滚动

Question

我在父母中有2个div：

<div class="parent">
    <div class="foo1"></div>
    <div class="foo2"></div>
</div>

foo1将具有动态高度，因此我无法使用以下样式：

height: calc(100% - foo1Height);

现在，我想要做的是确保较低的子foo2永远不会扩展到父div之外，并显示滚动条是否太大。我更喜欢CSS唯一的解决方案。

Answer 1

您可以使用 flexbox 。没有标记变化。

.parent {
  display: flex;
  flex-direction: column;
  height: 100px;
}
.foo2 {
  flex: 1; /*expand to fit*/
  background: silver;
  overflow: auto; /*scroll as needed*/
}

<div class="parent">
  <div class="foo1">1</div>
  <div class="foo2">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
</div>

或者使用 CSS表格，需要额外的标记。

.parent {
  display: table;
  width: 100%;
  height: 100px;
}
.foo1, .foo2 {
  display: table-row;
}
.cell {
  display: table-cell;
  position: relative;
}
.foo2 {
  height: 100%; /*expand to fit*/
  background: silver;
}
.scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto; /*scroll as needed*/
}

<div class="parent">
  <div class="foo1">
    <div class="cell">1</div>
  </div>
  <div class="foo2">
    <div class="cell">
      <div class="scroll">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
    </div>
  </div>
</div>