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

Posted 2023-03-06

【中文标题】如何设置一个 div 与另一个 div 具有相同的高度？ [复制]

【英文标题】：How to set that one div has got the same height that another one? [duplicate]

【发布时间】：2013-04-04 03:11:07

【问题描述】：

有如下简单结构：

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

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

【问题讨论】：

这是本书中最古老的问题之一。发帖前请先搜索。例如How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

我搜索但我什么都没有

恐怕没有 javascript/jQuery 就无法做到这一点（如果你想让 menu 和 content 垂直堆叠）。

@MiljanPuzović 当然可以：codepen.io/cimmanon/pen/JrGLm

@cimmanon 我的意思是如果他想设置在布局中垂直堆叠的元素的相等高度（一个在另一个之上），而不是并排。

【参考方案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

的技术

【讨论】：

演示和一些代码怎么样？比试图描述该技术效果更好。

【参考方案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;