Question

有没有办法让两列在高度上相互匹配，而不使用表格单元格，固定高度或Javascript？

使用TABLE

<table>
    <tr>
        <td style="background:#F00;">
            This is a column
        </td>
        <td style="background:#FF0;">
            This is a column<br />
            That isn't the same<br />
            height at the other<br />
            yet the background<br />
            still works
        </td>
    </tr>
</table>

使用DIV

<div style="float:left;background:#F00" >
    This is a column
</div>
<div style="float:left;background:#FF0" >
    This is a column<br />
    That isn't the same<br />
    height at the other<br />
    yet the background<br />
    still works
</div>
<div style="clear:both;" ></div>

目标是使两个背景都延伸到整个高度，而不管哪一侧更高。

将一个嵌套在另一个中是行不通的，因为它不能保证两边都是正确的高度。

不幸的是，预览显示了正常工作的HTML，但实际的帖子却将其剥离了。您应该可以将其粘贴到HTML文件中，看看我的意思。

Answer 1

http://www.xs4all.nl/~peterned/examples/csslayout1.html

这是你想要的东西，给他们两个高度100％（使用这个css技巧），他们将延伸到包含div的高度！

编辑：忘了提，把它们放在容器div中！

编辑：

<html>
<head>
    <style>
        html, body
        {
            margin: 0;
            padding: 0;
            height: 100%; /* needed for container min-height */
        }
        #container
        {
            background-color: #333333;
            width: 500px;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne, #colTwo
        {
            width: 250px;
            float: left;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne
        {
            background-color: #cccccc;
        }
        #colTwo
        {
            background-color: #f4f5f3;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="colOne">
            this is something</div>
        <div id="colTwo">
            this is also something</div>
        <div style="clear: both;">
        </div>
    </div>
</body>
</html>

Answer 2

仅仅因为没有人这样说过，很多时候人们只是通过一个背景图像将虚假存在于偶数列中，并将其自身整理到外部容器的底部。

这给出了内容在两个相等的列中的外观，即使一个在另一个之前结束。

Answer 3

使用Faux Column CSS技术解决此问题。

鉴于以下内容：

<div class="contentSidebarPair">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

您可以使用以下样式：

/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
   #FFF is the bgcolor of your content */
div.contentSidebarPair {
    background: #FFF url('sidebar.gif') repeat-y top left;
    width: 800px;
    margin: 0 auto; /* center */
    zoom: 1; /* For IE */
}

/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.sidebar {
    float: left;
    width: 200px;
}

div.content {
    float: left;
    width: 600px;
}

有！简单有效。绝对零JavaScript涉及。如果您想创建更复杂的布局（液体布局），您可以使用背景位置调整此技术。一个tutorial is available here。

Answer 4

display:inline-block

有了技巧，它甚至可以在IE中使用：

<div><span>
    col1
</span></div>
<div><span>
    col2
</span></div>

div {display:inline;}
span {display:inline-block;}

Answer 5

是的，它是可能的 - 纯CSS而且没有黑客 - equal height columns。

查看本文 - 写得非常好。

Answer 6

如果您正在处理支持CSS2.1（IE8及更高版本，所有其他主流浏览器）的浏览器，那么这很简单。如果这是你的标记：

<div>
    This is a column
</div>
<div>
    This is a column<br />
    That isn't the same<br />
    height at the other<br />
    yet the background<br />
    still works
</div>

这将是你的CSS：

div { display: table-cell; }

如果布局中需要多行，则必须在其中添加一些包装元素，否则this works straight off。

Answer 7

Theres是一种使用聪明的HTML和CSS实现这一目标的简单方法。

首先是HTML：

<div id="container">
    <div id="col1">
        this is column 1
    </div>
    <div id="col2">
        this is column 2<br />
        it is obviously longer than the first column <br />
        YEP!
    </div>
</div>

请注意缺乏明确性：两个都是无意义的div。

现在的CSS：

#container { background:#f0f; overflow:hidden; width:400px; }
#col1, #col2 { float:left; width:50%; }
#col2 { background:#ff0; }

容器规则中隐藏的溢出确保容器扩展到包含的浮动div的大小（并且摆脱了每个人都非常喜欢的unsematic清除div）。

容器的背景适用于第一列。 col2 div的背景仅适用于第二个div。这就是让我们觉得两个div总是一样高的错觉。

3行CSS中的简单语义解决方案。享受

编辑：请评论投票的原因，否则我必须猜测为什么我的答案是错误的。在这种情况下，我忘了将width属性添加到容器中，以便它与IE6 / 7一起使用。请查看上面修改过的CSS。

甚至列高也不使用TABLE

7 个答案: