如何使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来填充剩余的空间。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你需要支持pre-flexbox浏览器 - 这意味着更老的IE，那么它显然不那么琐碎。在我的头顶，我不确定它是否可能。我认为这是一个练习短语＆＃34;优雅降级的机会。＆＃34;