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

有以下简单的结构：如何设置一个div与另一个div具有相同的高度？

<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。我该如何解决它？

来源

2013-04-11 user2218845

这是书中最古老的问题之一。发帖前请先搜索。例如[如何在不指定父母身高的情况下强制孩子分数达到父母分数的100％？]（http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents -div-without-specified-parents-heigh） – Boaz 2013-04-11 19:19:18

我在搜索，但我什么也没有 – user2218845 2013-04-11 19:20:27

如果没有JavaScript/jQuery，恐怕你不能这样做（如果你想拥有'menu'和'content '垂直堆叠）。 – 2013-04-11 19:32:03

如果你不那么在乎IE6和IE7，最简单的答案是设置

display: table-cell;

您的每个列

。只需检查http://ie7nomore.com/css2only/table-layout/为这个纯粹的CSS2.1解决方案（这两列是contenteditable，所以你可以很容易地添加一行和/或另一列的文本行和行）
而且不，它不是“使用表”，因为有些人可能会争论：CSS属性display的table值呈现相同的方式作为一个HTML元素table，但它仍然是一个div（即无）的语义或任何元素它的应用;）

那么对于IE6和IE7，你可以使用条件注释进行简单的回退（如将背景应用于其中一个列，并且如果另一个在某些页面中较长......不要忘记并忘记它，它是旧的IE，并且您的文本仍然可读）

另一种方法（视觉把戏）是人造列

来源

2013-04-11 19:29:42 FelipeAls

如何演示和一些代码？比试图描述技术更好。 – cimmanon 2013-04-11 20:03:28

我所使用的显示器技术：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-11 20:43:42 Cam

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

回答

相关问题