Question

好的，所以获得相同的div高度变成了一个相当大的过程。似乎有很多方法可以做到这一点。我想使用CSS，因为我很讨厌它，我希望有人可以帮助我。

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

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

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

这样做的最佳方式是什么？

Answer 1

~~best~~ 在现代* broswers中制作相同高度列的最优雅方法是将每个列设置为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和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; }

Answer 3

您可以使用 css表获得所需的结果，其简单易懂，请参阅演示： - http://jsfiddle.net/nWXyu/5/

or you can read more about equal height columns :

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

最佳等于div高度选项？

3 个答案: