假设我有一个固定大小的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自动拉伸.
三个div(#a,#b,#c)应该填充#container的整个高度.
解决方法
您可以使用FlexBox和flex-direction：列,因此如果在#b上设置flex：1,则会占用剩余的可用空间.
#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做同样的事情
