最佳相等 div 高度选项？答案

【问题标题】：Best equal div height option?最佳相等 div 高度选项？
【发布时间】：2012-06-16 00:43:36
【问题描述】：

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

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

（对于 CSS 中大量的背景渐变感到抱歉）

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

最好的方法是什么？

【问题讨论】：

CSS - Equal Height Columns?的可能重复
这个问题很可能会被关闭。有很多问题已经涵盖了这个主题，请在您提出已经回答的问题之前尝试进行搜索。您的问题应该是关于实现您自己发现的一种技术的问题 - 在回答您的问题时，有人可能会就如何更好地编写代码向您提出建议。
是的，这是我的主要问题，如果不清楚，抱歉

标签： css html height equals fluid-layout

【解决方案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 之外的所有浏览器。

【讨论】：

谢谢，我试试看。
我很抱歉，但使用“最佳”一词表示不兼容的方法实际上可能不是“最佳”。请参阅链接的 SO 问题：stackoverflow.com/questions/2114757/css-equal-height-columns
公平的说，“最优雅”是如何抓住你的呢？
谢谢，我设法使用了 matthew james taylor 的方法，这似乎是流体页面的最佳解决方案。

【解决方案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; }

【讨论】：

这个解决方案在歌剧中被破坏了
它……丑陋。但我相信这种方法在 IE6/7 中有效，因此 OP 可能希望将其包含在条件样式表中，仅适用于 IE6&7。虽然“！important”在这里毫无意义。

【解决方案3】：

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

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

【讨论】：