html - 如何使 3 个 DIV 的中间拉伸(stretch)以垂直填充

Question

请看下面的片段。

.frame {
  height:10em;
  padding:2px;
  border:solid 1px black
}

.title {
  height:2em;
  overflow-y:scroll;
  border:solid 1px green
}

.body {
  height:100%; //??
  overflow-y:scroll;
  border:solid 1px red
}

.footer {
  border:solid 1px blue
}

 <div class="frame">
   <div class="title">
     headline
   </div>
   <div class="body">
     <p>... body ... </p>
   </div>
   <div class="footer">
     <textarea style="height:2em;width:95%"></textarea>
   </div>
<div>

是否可以让红色 (.body) div 填充绿色 (.title) 和蓝色 (.footer) div 之间的空隙，并让所有三个 div 完全适合黑色框架，而无需在脚本中计算高度？

Answer 1

这在 flexbox 中很简单——在你想要的元素上使用特定的高度，并在应该填充剩余空间的元素上使用 flex-grow:1。

.frame {
  height:10em;
  padding:2px;
  border:solid 1px black;
  display:flex;
  flex-direction: column
}

.title {
  height:2em;
  border:solid 1px green
}

.body {
  overflow-y:scroll;
  border:solid 1px red;
  flex-grow: 1
}

.footer {
  border:solid 1px blue
}

<div class="frame">
   <div class="title">
     headline
   </div>
   <div class="body">
     <p>... body ... </p>
   </div>
   <div class="footer">
     <textarea style="height:2em;width:95%"></textarea>
   </div>
<div>

如果您需要支持 flexbox 之前的浏览器——这意味着旧的 IE，几乎——它显然不那么微不足道。在我的脑海中，我不确定这是否可能。我会借此机会练习“优雅地降级”这句话。