0

有以下简单的结构：

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

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

4

2 回答 2

0

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

display: table-cell;

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

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

另一种方法（视觉技巧）是假列技术

于 2013-04-11T19:29:42.263 回答
0

我使用了 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;
 }
于 2013-04-11T20:43:42.693 回答