固定尺寸容器中的3个div:2个固定尺寸,1个应拉伸

Question

假设我有一个固定的大小div,其中包含3个divs:

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

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

如何让#bdiv自动拉伸.

这三个div的(#a,#b,#c)应填满整个height的#container.

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表小提琴做同样的事情