css - 最佳相等 div 高度选项？

Question

好的，所以获得相等的 div 高度是一个相当大的过程。似乎有很多方法可以做到这一点。我想使用 CSS，因为我很不擅长，我希望有人能帮我一把。

这是我的基本布局。 http://jsfiddle.net/SineMetu/nWXyu/1/

（抱歉css中的大量背景渐变）

我希望所有 div 都是最高 div 的高度。我需要它能够在调整页面大小时动态（流畅地）更改高度。所以基本上页面上的所有 div 都会在调整大小时调整为最高的 div。

做这个的最好方式是什么？

Answer 1

在现代* 浏览器中制作等高列的最佳最优雅的方法是将每个列设置为display: table-cell;

<div id="page">
<div class="column one">one</div>
<div class="column two">two</div>
<div class="column three">three</div>
</div>

<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div#page {
display: table;
table-layout: fixed; /* this prevents column width from changing with content */
width: 100%;
height: 100%;
}
div.column {
display: table-cell;
width: 33%;
height: 100%;
}
div.one {
background-color: #CCC;
}
div.two {
background-color: #999;
}
div.three {
background-color: #666;
}
</style>

*) 基本上，这适用于除 IE 6 和 7 之外的所有浏览器。

Answer 2

您可以使用css 表获得您想要的结果，它很容易理解，请参阅演示：- http://jsfiddle.net/nWXyu/5/

或者您可以阅读有关等高列的更多信息：

http://css-tricks.com/examples/FluidEqualHeightFauxColumns/

Answer 3

我会同时使用 css 和 html 在两个 div 上实现相等的高度。

<div class="container">
    <div class="equal-height"></div>
    <div class="equal-height"></div>
</div>

.container { overflow: hidden; }
.equal-height { margin-bottom: -99999px; padding-bottom: 99999px !important; }