Question

有以下简单结构：

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

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

Answer 1

如果您对IE6和IE7不太在意，最简单的答案是设置

display: table-cell;

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

然后对于IE6和IE7，您可以使用条件注释进行简单的回退（例如将背景应用于其中一个列，如果另一个页面中的另一个更长...没关系并忘记它，它是旧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;
 }

如何设置一个div与另一个div的高度相同？

2 个答案: