提问人：hugoware 提问时间：12/3/2008 最后编辑：Brian Tompsett - 汤莱恩hugoware 更新时间：9/15/2016 访问量：942
在不使用 TABLE 的情况下均匀列高
Even column heights without using a TABLE
问：
有没有办法在不使用表格单元格、固定高度或 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 文件中，然后了解我的意思。
答：
3赞
asleep
12/3/2008
#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>
评论
0赞
MrChrister
12/3/2008
我给。我一直在尝试，但我无法使柱子彼此相邻并且高度相同。我该怎么做？
0赞
Zack The Human
12/3/2008
这在 FireFox 2 中对我不起作用，但在 IE6 中却对我有用——是什么原因？我正在将它与 XHTML 1.0 过渡文档类型一起使用。
1赞
hugoware
12/4/2008
这很接近 - 但它似乎在 FireFox 中不起作用
-2赞
Darko
12/3/2008
#2
有一种简单的方法可以通过巧妙的 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 unsemantic 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。
评论
0赞
hugoware
12/4/2008
仅当您知道哪一列会更长时，这才有效。这是一个很好的解决方案，但我很好奇找到在未知长度的情况下覆盖的方法。
0赞
Kornel
12/3/2008
#3
display:inline-block
通过一个技巧，它甚至可以在IE中工作：
<div><span>
col1
</span></div>
<div><span>
col2
</span></div>
div {display:inline;}
span {display:inline-block;}
2赞
AmbroseChapel
12/3/2008
#4
仅仅因为没有人这么说，很多时候人们只是假装偶数列的存在，通过一个背景图像，它一直平铺到外部容器的底部。
这看起来内容位于两列相等的列中，即使一列在另一列之前结束。
2赞
Andrew Moore
6/26/2009
#5
使用 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来调整这种技术。此处提供了教程。
0赞
zeroDivisible
8/7/2009
#6
是的，这是可能的 - 纯 CSS 和没有黑客 - 等高列。
检查这篇文章 - 它写得很好。
0赞
robertc
7/11/2011
#7
如果您正在处理支持 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; }
如果你在布局中需要多行，你将不得不在其中添加一些包装元素，但除此之外，这直接起作用。
评论