Question

我有一个容器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>

Answer 1

创建相同高度的div的一种非常有用的技术是使用一种名为“Faux Columns”的技术来模拟它。这是Dan Cederholm首先提出的一个想法（你可以read his original article here），并且已经发展了。你可以看到good tutorial here。如果您需要在液体布局环境中you might want to read this article。

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

Answer 2

我经常被CSS纯粹主义者抨击这个建议，但每当我遇到这样的问题时 - 据我所知 - CSS根本就没有提供解决方案（不，“改变你的设计”）不算数！）......

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

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

Answer 3

首先：如果你对不同的元素有相同的属性，请遵守DRY原则（不要重复自己）并按如下方式编写：

.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>

Answer 4

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

Answer 5

您可以使用css为现代浏览器（display:table-cell, etc.）尝试，但这在IE6和IE7中无效。

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

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

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

5 个答案: