两列与最深列的高度相同？答案

【问题标题】：Both columns same height as deepest column?两列与最深列的高度相同？
【发布时间】：2010-12-19 07:34:25
【问题描述】：

如果我有这样的 div 布局：

<div id="stretchyheader"></div>
<div id="fixedwidthwide"><div>
<div id="fixednarrow></div>
<div id="footer"></div>

这使得这样的事情：

-----------------------------------------------------
|          stretchyheader                           |
-----------------------------------------------------
      |                     |              | 
      |                     |              | 
      |    fixedwidthwide   |  fixednarrow |
      |                     |              | 
      |                     |              | 
      |                     | --------------
      |                     |             
      |                     |             
      |                     |       patterned          
      |                     |       background
      -----------------------
                    -  footer  -

如何确保两列与最深列的高度相同？列高可根据内容量灵活调整，并具有白色背景。

【问题讨论】：

标签： html css height

【解决方案1】：

一个非常简单的常用方法是使用Faux Columns。

你会得到一个看起来像这样的结构：

<div id="stretchyheader"></div>
<div id="container">
    <div id="fixedwidthwide"></div>
    <div id="fixednarrow></div>
</div>
<div id="footer"></div>

您实际上将背景图像应用到#container 以将任何背景颜色、边框等添加到 2 列中的每一列。

有一些 CSS 技术可以做到这一点而不会伪装，但它们要复杂得多：

【讨论】：

【解决方案2】：

改编自here：

围绕两个固定的列创建一个容器，并有这样的 css：

#container {
    float:left;
    width:[sum of the two columns width];
}
#fixedwidthwide {
    float:left;
    width:[whatever];
}
#fixednarrow {
    float:left;
    width:[whatever];
}

请注意，仅当列需要出于某种原因具有相同的高度时才需要这样做。如果没有，您可以按照 philfreo 的建议并使用假列。

【讨论】：

【解决方案3】：

这个问题有很多解决方案，包括 OneTrueLayout Technique、Faux Columns Technique 和 CSS 表格显示技术。

等高列的最佳解决方案是 CSS Tabular Display Technique，这意味着使用 display:table 功能。它适用于 Firefox 2+、Safari 3+、Opera 9+ 和 IE8。

CSS 表格显示的代码：

HTML

<div id="container">
    <div id="rowWraper" class="row">
            <div id="col1" class="col">
                Column 1<br />Lorem ipsum<br />ipsum lorem
            </div>
            <div id="col2" class="col">
                Column 2<br />Eco cologna duo est!
            </div>
            <div id="col3" class="col">
                Column 3
            </div>
        </div>
</div>

CSS

<style>
#container{
    display:table;  
    background-color:#CCC;
    margin:0 auto;
}

.row{
    display:table-row;
}

.col{
    display: table-cell;
}

#col1{
    background-color:#0CC;
    width:200px;
}

#col2{
    background-color:#9F9;
    width:300px;
}

#col3{
    background-color:#699;
    width:200px;
}
</style>

即使表格单元格宽度的自动扩展存在问题，也可以通过在表格单元格中插入另一个 div 并为其提供固定宽度来轻松解决。无论如何，宽度的过度扩展发生在使用非常长的单词（我怀疑有人会使用一个，比如说，600px 长的单词）或某些宽度大于表格单元格宽度的 div 的情况下。

Faux Column Technique 可以解决这个问题，但它有一些缺点，例如，如果你想调整列的大小，你必须调整背景平铺图像的大小，这也不是一个优雅的解决方案。

OneTrueLayout Technique 包括创建一个极高高度的 padding-bottom 并通过应用相同巨大值的负 margin-bottom 并隐藏将实际边框位置带到“正常逻辑位置”将其切掉由溢出填充创建的范围：隐藏应用于内容包装器。一个简化的例子是：

HTML 文件：

<html><head>
<style>
.wraper{
    background-color:#CCC;
    overflow:hidden;
}

.floatLeft{
    float:left; 
}

.block{
    padding-bottom:30000px;
    margin-bottom:-30000px;
    width:100px;
    background-color:#06F;
    border:#000 1px solid;
}
</style>
</head>
<body>
    <div class="wraper">
    <div class="block floatLeft">first col</div>
        <div class="block floatLeft">
                Second col<br />Break Line
        </div>
    <div class="block floatLeft">Third col</div>
</div>
</body>
</html>

在我看来，自动高度容器中未实现的 100% 高度是一个主要缺点，W3C 应该考虑修改这个属性。

其他资源：link1、link2、link3、link4、link5 (important)

【讨论】：