html - 固定大小容器中的 3 个 div : 2 have fixed size, 1 应该拉伸(stretch)

Question

假设我有一个固定大小的 div，其中包含另外 3 个 div:

• 第一个和最后一个也有固定的大小，中间的应该填满剩余的空间

 #container {
   width: 100px;
   height: 100px;
 }
 #a,
 #c {
   height: 20px;
 }
 #b {
   height: 60px; // this should be a generic value...
 }

<div id="container">
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
</div>

如何使 #b div 自动拉伸(stretch)。

三个div(#a, #b, #c) 应该填满整个高度 #容器。

Answer 1

您可以使用 Flexbox和 flex-direction: column , 所以如果你设置 flex: 1在 #b它将占用剩余的可用空间。

#container {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}
#a,#c {
  height: 20px;
  background: lightblue;
}
#b {
  flex: 1;
  background: lightgreen;
}

<div id="container">
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
</div>

更新:我想你可以用 css 表格做同样的事情 Fiddle