没有 JavaScript 的简单等高 DIV 可能吗？答案

【问题标题】：Easy equal height DIVs without JavaScript possible?没有 JavaScript 的简单等高 DIV 可能吗？
【发布时间】：2010-09-02 20:28:03
【问题描述】：

到目前为止，我主要使用基于表格的布局，但由于它被认为是过去不可行的事情，现在我已经承担了学习基于 DIV 的布局的任务。

到目前为止，对我来说最烦人的挑战之一是找到一种方法来获得适用于所有主要浏览器的等高 DIV，它不依赖于 JavaScript，也不需要 complicated CSS tactics。我有点想知道为什么使用 DIV 是进行布局的首选方法，而表格允许快速轻松地创建等高页面元素。

我有哪些选择？如果没有完美的方法，您会推荐使用 jQuery 吗？我想将此技术应用于可以查看here 的侧边栏。（这是我正在开发的一个主题的测试环境。）

更新：事先不知道列的高度；这取决于它应该能够容纳多少内容。

【问题讨论】：

标签： css html

【解决方案1】：

据我所知没有完美的方法，这是 CSS 的弱点之一。

但是，在您的情况下，您可以使用Faux Columns technique。

【讨论】：

【解决方案2】：

here is an example using pure css

body{margin-bottom:50px}
div.holder { overflow:hidden }
div.holder div { float:left; width:30%; background-color:#9C0; margin-right:5px; padding:10px; padding-bottom:9000px; margin-bottom:-9000px }

http://abcoder.com/wp-content/uploads/2009/09/css-equal-height-three-column-layout.html

【讨论】：

【解决方案3】：

如果标准不允许您做您需要的事情，那就把它们搞砸并使用一张桌子。

【讨论】：