html - 一格动态高度一格剩余高度和滚动

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 table，需要额外的标记。

.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>