基于父级的div的动态最大高度

Question

假设我有以下内容：

.wrap { height:400px; }
.header { height:100px; }
.footer { height:100px; }

<div class="wrap">
  <div class="header"></div>
  <div class="middle_row"></div>
  <div class="footer"></div>
</div>

是否有任何CSS解决方案可以将.middle_row动态拉伸到200px？

Answer 1

是的，请尝试Flexbox

.wrap {
  display: flex;
  height: 400px;
  flex-direction: column;
}

.header, .footer {
  flex: 0 0 100px;
  background: lightblue;
}

.middle_row {
  flex: 1;
  background: lightgreen;
}

<div class="wrap">
  <div class="header"></div>
  <div class="middle_row"></div>
  <div class="footer"></div>
</div>

Answer 2

您可以简单地给它height 50%。这将把它设置为父母高度的一半（400px / 2 = 200px）。

.middle_row { height: 50%; }