html – 固定大小容器中的3个div：2个固定大小,1个应该伸展

概述假设我有一个固定大小的div,其中包含3个其他div： >第一个和最后一个也有固定的大小,中间的一个应该填充剩余的空间 #container { width: 100px; height: 100px; } #a, #c { height: 20px; } #b { height: 60px; // this should be a generic value.. 假设我有一个固定大小的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做同样的事情

总结

以上是内存溢出为你收集整理的html – 固定大小容器中的3个div：2个固定大小,1个应该伸展全部内容，希望文章能够帮你解决html – 固定大小容器中的3个div：2个固定大小,1个应该伸展所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。