通读了一些类似问题的答案,我仍然不清楚这是否可能。
考虑 clearfixed 容器内 2 个 float 列的情况。 Column1 的内容可以增长并确定容器的高度。 Column2 的内容始终保证小于 Column1,但其高度应拉伸(stretch)以填充容器。
到底如何让 Column2 拉伸(stretch)?
Here's the jsbin (With Column2 not stretching)
不想做的事
- 使用javascript
- 绝对位置
- 使用表格 html
我可以用这些技术找出一些东西,但将其视为学术练习。我试图弄清楚 css 是否提供了一个“正确”的解决方案,我可以只记住并完成它。我怀疑答案可能是以下我尚未完全理解的技术之一。
- 使用表格 css 显示类型
- 整个 flexbox 的东西很快就会出来
- 无论 Twitter Bootstrap 做什么
最佳答案
如您所料,表格 CSS will work只要您不需要支持旧 IE:
section {
width: 50%;
display: table-cell;
box-sizing: border-box;
border: solid grey 1px;
}
Flexbox 也可以工作,但要注意 what's currently implemented 之间的显着差异。在浏览器和 what the current draft says .
我没有在愤怒中使用 Twitter bootstrap,所以我无法对此发表评论。
关于Css - 将一个 float 列调整为与另一个 float 列相同的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14057840/