如何使3个DIV的中间伸展以垂直填充

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之间的间隙,并使所有三个完全适合黑色框架而不在脚本中计算高度？

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>

如果你需要支持pre-flexbox浏览器 - 这意味着更老的IE,那么它显然不那么重要.在我的头顶,我不确定它是否可能.我会把它当作练习"优雅降级"这个短语的机会.