如何设置一个 div 与另一个 div 具有相同的高度？ [复制]

Question

有如下简单结构：

<div id="container">
   <div id="header">...</div>
   <div id="menu">...</div>
   <div id="content">...</div>
   <div id="footer">...</div>
</div>

我需要菜单和内容具有相同的高度，但我不能设置为常量。我将这两个项目的“最小高度”设置为“600px”，但现在“内容”超过 600 像素，但“菜单”有 600 像素。我该如何解决？

Answer 1

如果你对IE6和IE7不太关心，最简单的答案就是设置

display: table-cell;

在您的每一列。 只需检查 http://ie7nomore.com/css2only/table-layout/ 即可了解此纯 CSS2.1 解决方案（两列都是 contenteditable，因此您可以轻松地在一个和/或另一列中添加行和文本行）
不，它不是“使用表格”，有些人可能会说：CSS 属性 display 的 table 值与 HTML 元素 table 的呈现方式相同，但它仍然是 div 的语义（即没有）或它应用于的任何元素;）

然后对于 IE6 和 IE7，您可以使用条件 cmets 进行简单的回退（例如将背景应用到其中一列，如果另一列在某些页面中较长...没关系，忘记它，它是旧的 IE 和您的文本仍然可读）

另一种方法（视觉技巧）是faux-columns

的技术

Answer 2

我使用了 display: inline-block，这是你要找的吗？

http://jsfiddle.net/SMxRs/1/

#header, #menu, #content, #footer {
 width: 600px;
 height: 500px;
 background: #ccc;
 padding-left: 10px;
 display: inline-block;
}
#container {
width: 2500px;
 }