html - Even column heights without using a TABLE

Question

Is there a way to have two columns, that match each other in height, without using table cells, fixed heights or Javascript?

Using a 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>

Using DIVs

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

The goal is to make both backgrounds extend the full height regardless of which side is taller.

Nesting one in the other wouldn't work because it doesn't guarantee both side are the correct height.

Unfortunately, the preview showed the working HTML, but the actual post stripped it out. You should be able to paste this into an HTML file and see what I mean.

score 3 · Accepted Answer

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>

score 2 · Accepted Answer

只是因为没有人这么说，很多时候人们只是假装偶数列的存在，通过将背景图像一直平铺到外部容器的底部。

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

score 2 · Accepted Answer

使用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。如果你想创建更复杂的布局（流式布局），你可以使用 background-position 来调整这种技术。此处提供了教程。

score 0 · Accepted Answer

display:inline-block

有了一个技巧，它甚至可以在 IE 中工作：

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

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

score 0 · Accepted Answer

是的，这是可能的——纯 CSS，没有 hacks——等高列。

检查这篇这篇文章 - 它写得很好。

score 0 · Accepted Answer

如果您正在处理支持 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; }

如果您在布局中需要多行，则必须在其中添加一些包装器元素，否则这将直接起作用。

score -2 · Accepted Answer

有一种简单的方法可以通过巧妙的 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>

请注意缺少 clear:both 无语义的 div。

现在的CSS：

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

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

容器的背景适用于第一列。col2 div 的背景仅适用于第二个 div。这就是让我们产生两个 div 始终高度相同的错觉。

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

编辑：请评论投反对票的原因，否则我不得不猜测为什么我的答案是错误的。在这种情况下，我忘记将 width 属性添加到容器中，以便它与 IE6/7 配合得很好。请检查上面修改后的 CSS。

html - Even column heights without using a TABLE

7 回答 7

Related

Reference