Question

如果我有这样的div布局：

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

这是这样的：

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

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

Answer 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技术可以做到这一点而不会伪造它，但它们要复杂得多：

Answer 2

改编自here：

围绕两个固定列创建一个容器，并使用如下css：

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

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

Answer 3

此问题有多种解决方案，包括 OneTrueLayout技术 ， 虚拟列技术 和< strong> 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并赋予其固定宽度来轻松解决。无论如何，宽度的过度扩展发生在使用非常长的单词的情况下（我怀疑任何人都会使用a，比方说600px长的单词）或者某些div的宽度大于表格单元的宽度。

Faux Column Technique可能是解决此问题的方法，但它有一些缺点，例如，如果要调整列的大小，则必须调整背景平铺图像的大小，这也不是一个优雅的解决方案。 / p>

OneTrueLayout Technique包括创建一个极高的填充底部，并通过应用相同巨大值的负边距底部将真实边框位置置于“正常逻辑位置”来剪切它并使用溢出来隐藏填充所创建的范围：隐藏应用于内容包装器。一个简化的例子是：

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)

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

3 个答案: