如何使三个内部div具有相同的高度？答案

【问题标题】：how to make three inside divs the same height?如何使三个内部div具有相同的高度？
【发布时间】：2009-12-08 09:56:30
【问题描述】：

我有一个容器 div#content，里面包含三个 div。现在，我怎样才能确保里面的三个 div 具有相同的高度？当然，我希望每个 div 的高度都可以根据其内容进行扩展。例如：这是我尝试过的

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
<style type="text/css">
   #content{background-color:#DDDDD;width:100%;overflow:auto;clear:both;height:100%;}
   #col1{background-color:yellow;width:10%;float:left;height:100%;}
   #col2{background-color:red;width:30%;float:left;height:100%;}
   #col3{background-color:#AAAAAA;width:10%;float:left;;height:100%;}
</style>
</head>
<body>
<div id="content">
 <div id="col1">
     <script language="javascript">
 for(i=0;i<1000;i++){
 document.write(i+"<br />");
 }
 </script>
 </div>
 <div id="col2">
      <script language="javascript">
 for(i=0;i<100;i++){
 document.write(i+"<br />");
 }
 </script>
 </div>
 <div id="col3">
       <script language="javascript">
 for(i=0;i<10;i++){
 document.write(i+"<br />");
 }
 </script>
 </div>

【问题讨论】：

请正确格式化您的代码。四个空格缩进。
好吧，我可以不太关心缩进的实际大小......但同意，至少以可读的方式给我们......
在 doctype.com 上问这个问题可能会更好（有点像 SO，但是关于 html/js/...）
听起来你在追求一种非典型的三栏布局，这不仅是 CSS 的圣杯，也是海量博客文章和教程的主题。当人们说“Google it”时，我讨厌它，但在这种情况下，我觉得这实际上是你能得到的最佳答案。
哦，还有 Loren.... 嗯.... 抱歉，这让我无缘无故地发疯了.... 这就像一种疾病，但是嗯...它是“我可以不不在乎”。 “我可以不在乎”没有任何意义。

标签： css html height

【解决方案1】：

我经常因为这个建议而受到 CSS 纯粹主义者的抨击，但每当我遇到这样的问题时——据我所知——CSS 根本无法提供解决方案（不，“改变你的设计”不算！）...

我建议您在布局的那部分使用表格。

表格在所有主要浏览器中都可以轻松正确地调整垂直大小。在 CSS 为这些问题提供可行的解决方案之前，我会继续推荐它们。

【讨论】：

我有点厌倦了同样的老误解。 CSS 确实提供了一种解决方案，它是一个不知道如何正确处理 ccc 的市长浏览器。
如果一个主流浏览器不能处理它，这不是一个解决方案。我知道这不是 CSS 的错，但它也不能解决问题。
嗯，解决问题的方法有很多种：fake it，对某些浏览器使用 css + javascript，使用 javascript，使用表格等。它们都是有效的解决方案；我在评论您的不正确的 css 评论，而不是您的表格解决方案，它工作得很好。

【解决方案2】：

创建等高 div 的一个非常有用的技术是使用一种称为“Faux Columns”的技术来模拟它。这是 Dan Cederholm (You can read his original article here) 最先提出的一个想法，此后不断发展。你可以看到good tutorial here。如果您在流式布局环境中需要它，you might want to read this article。

基本上，这个想法建立在不试图强制 div 具有相同高度的基础上，而是具有三个 div 的包装器，其背景图像模拟列的背景。这种方法在所有现代浏览器中都有效（在这种情况下，ie6 甚至算作现代浏览器）。不利的部分是您需要一个至少与允许扩展页面一样宽的背景图像。即 X 像素宽和 1 像素高。

【讨论】：

【解决方案3】：

首先：如果你在不同的元素上有相同的属性，请遵守DRY原则（Don't Repeat Yourself），这样写：

.content div{
    border:1px solid #404040
}

这样你只需要在一个地方改变它。

现在谈谈你的问题。对于动态高度，我会指定 div 的高度应为 100%，因此它们会填充所有垂直空间。这不能很好地跨浏览器工作，所以寻找一个可以做到这一点的黑客。如果您不希望 div 填充内容 div，请在内容 div 中放置另一个 div，并将其放在 3 个 div 周围。

所以：

<div id="content">
    <div class="innerContent">
        <div class="1">Lorem Ipsum</div>
        <div class="2">Lorem Ipsum</div>
        <div class="3">Lorem Ipsum</div>
    </div>
</div>

【讨论】：

作为你在这里做的例子，只需将 height:100% 添加到 .innerContent 就会使里面的所有 3 个 div 具有相同的高度？我不这么认为。当然，在您的示例中，3 个 div 具有完全相同的内容。不同高度的不同内容怎么样？
我知道 height:100% 不起作用，一个或多个黑客和 min-height:100% 的组合应该。具有最多内容的 div 将决定 div.innerContent 的高度，因此其他两个 div 会将其高度调整为 100%，因此相同。
您能否更具体地了解“黑客组合”？
这里有更多关于如何做到这一点的信息。 456bereastreet.com/archive/200406/… 和 dave-woods.co.uk/?p=144

【解决方案4】：

我可能是错的，但我认为您要么在 div 中设置相同的高度值（以百分比或 px 为单位），要么您必须执行一些脚本（例如在 JavaScript 中）来检查内容高度并设置其他高度。我不认为这对 CSS 是可行的。如果我错了，我想知道答案：P

【讨论】：

百分比高度未得到广泛支持

【解决方案5】：

您可以在现代浏览器 (display:table-cell, etc.) 上使用 css 进行尝试，但在 IE6 和 IE7 中不起作用。

如果 IE6 和 IE7 是必需的（我想是...），您可以使用条件语句为它们包含一些 JavaScript，并让该 JavaScript 将所有列的高度设置为最高。不是很漂亮，但 IE6 和 7 的百分比无论如何应该会快速下降。

顺便说一下，Machine 的解决方案（人造柱）是另一种适用于许多设计的解决方案。

【讨论】：

我保证这是我对这个问题的最后评论，但我无法抗拒：没有桌子的人群为了避免最可行的解决方案会竭尽全力，这真是令人惊讶。
只提供之前未提及的替代方案，选择可行的解决方案...