HTML/CSS：使两个浮动 div 具有相同的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1205159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS: Making two floating divs the same height
提问by Deniz Dogan
I have a little peculiar problem that I currently solve using a table, see below. Basically, I want to have two divs take up 100% of the available width, but only take up as much vertical space as needed (which isn't really that obvious from the picture). The two should at all times have the exact same height with a little line between them, as shown.
我有一个小问题，我目前使用 a 解决table，见下文。基本上，我想让两个 div 占据可用宽度的 100%，但只占据所需的垂直空间（这在图片中并不是那么明显）。如图所示，两者应始终具有完全相同的高度，并且在它们之间有一条小线。
(source: pici.se)
（来源：pici.se）
This is all very easy to do using table, which I'm currently doing. However, I'm not too keen on the solution, as semantically this is not actually a table.
这一切都非常容易使用table，我目前正在这样做。但是，我不太热衷于解决方案，因为从语义上讲，这实际上不是一个表格。
回答by Natalie Downe
You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.
您可以通过应用大量的底部填充、相同数量的底部负边距并用隐藏溢出的 div 围绕列来在 CSS 中获得相等高度的列。垂直居中文本有点棘手，但这应该对您有所帮助。
#container {
overflow: hidden;
width: 100%;
}
#left-col {
float: left;
width: 50%;
background-color: orange;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
border-left: 1px solid black;
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div id="container">
<div id="left-col">
<p>Test content</p>
<p>longer</p>
</div>
<div id="right-col">
<p>Test content</p>
</div>
</div>
</body>I think it worth mentioning that the previous answer by streetpc has invalid html, the doctype is XHTML and there are single quotes around the attributes. Also worth noting is thatyou dont need an extra element with clearon in order to clear the internal floats of the container. If you use overflow hidden this clears the floats in all non-IE browsers and then just adding something to give hasLayout such as width or zoom:1 will cause IE to clear its internal floats.
我认为值得一提的是 streetpc 的先前答案具有无效的 html，文档类型是 XHTML，并且属性周围有单引号。另外值得注意的是您不需要额外的元素clear来清除容器的内部浮动。如果您使用溢出隐藏这会清除所有非 IE 浏览器中的浮点数，然后只需添加一些内容来提供 hasLayout，例如 width 或 zoom:1 将导致 IE 清除其内部浮点数。
I have tested this in all modern browsers FF3+ Opera9+ Chrome Safari 3+ and IE6/7/8. It may seem like an ugly trick but it works well and I use it in production a lot.
我已经在所有现代浏览器 FF3+ Opera9+ Chrome Safari 3+ 和 IE6/7/8 中对此进行了测试。这似乎是一个丑陋的技巧，但效果很好，我在生产中经常使用它。
I hope this helps.
我希望这有帮助。
回答by Dmitry Leskov
It is year 2012+n, so if you no longer care about IE6/7, display:table, display:table-rowand display:table-cellwork in all modern browsers:
现在是 2012+n 年，所以如果你不再关心 IE6/7 display:table，display:table-row并且display:table-cell在所有现代浏览器中工作：
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
http://www.456bereasttreet.com/archive/200405/equal_height_boxes_with_css/
Update 2016-06-17:If you think time has come for display:flex, check out Flexbox Froggy.
2016 年 6 月 17display:flex日更新：如果您认为时机已到，请查看Flexbox Froggy。
回答by Luca Steeb
You should use flexbox to achieve this. It's not supported in IE8 and IE9 and only with the -ms prefix in IE10, but all other browsers support it. For vendor prefixes, you should also use autoprefixer.
您应该使用 flexbox 来实现这一点。它在 IE8 和 IE9 中不受支持，在 IE10 中只有 -ms 前缀，但所有其他浏览器都支持它。对于供应商前缀，您还应该使用autoprefixer。
.parent {
display: flex;
flex-wrap: wrap; // allow wrapping items
}
.child {
flex-grow: 1;
flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}
回答by Andi P. Trix
you can get this working with js:
你可以用 js 来实现这个：
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
回答by Philippe Leybaert
This is a classic problem in CSS. There's not really a solution for this.
这是 CSS 中的一个经典问题。对此没有真正的解决方案。
This article from A List Apartis a good read on this problem. It uses a technique called "faux columns", based on having one vertically tiled background image on the element containing the columnsthat creates the illusion of equal-length columns. Since it is on the floated elements' wrapper, it is as long as the longest element.
来自 A List Apart 的这篇文章很好地解释了这个问题。它使用一种称为“假列”的技术，基于在包含列的元素上放置一个垂直平铺的背景图像，从而产生等长列的错觉。由于它位于浮动元素的包装器上，因此它与最长的元素一样长。
The A List Apart editors have this note on the article:
A List Apart 编辑在文章中有这样的注释：
A note from the editors: While excellent for its time, this article may not reflect modern best practices.
编者注：尽管在当时非常出色，但本文可能无法反映现代最佳实践。
The technique requires completely static width designs that doesn't work well with the liquid layouts and responsive design techniques that are popular today for cross-device sites. For static width sites, however, it's a reliable option.
该技术需要完全静态的宽度设计，不能很好地与当今跨设备站点流行的液体布局和响应式设计技术配合使用。然而，对于静态宽度站点，这是一个可靠的选择。
回答by Mr Br
I had similar problem and in my opinion best option is to use just a little bit of javascript or jquery.
我有类似的问题，我认为最好的选择是只使用一点点 javascript 或 jquery。
You can get wanted divs to be same height by getting highest div value and applying that value to all other divs. If you have many divs and many solutions i suggest to write little advance js code to find out which of all divs is the highest and then use it's value.
您可以通过获取最高 div 值并将该值应用于所有其他 div 来使想要的 div 具有相同的高度。如果你有很多 div 和很多解决方案，我建议编写一些高级 js 代码来找出所有 div 中哪个是最高的，然后使用它的价值。
With jquery and 2 divs it's very simple, here is example code:
使用 jquery 和 2 个 div 非常简单，这里是示例代码：
$('.smaller-div').css('height',$('.higher-div').css('height'));
$('.smaller-div').css('height',$('.higher-div').css('height'));
And for the end, there is 1 last thing. Their padding (top and bottom) must be the same ! If one have larger padding you need to eliminate padding difference.
最后，还有最后一件事。它们的填充（顶部和底部）必须相同！如果有较大的填充，则需要消除填充差异。
回答by Quintox303
Using Javascript, you can make the two div tags the same height. The smaller div will adjust to be the same height as the tallest div tag using the code shown below:
使用 Javascript，您可以使两个 div 标签具有相同的高度。使用下面显示的代码，较小的 div 将调整为与最高的 div 标签相同的高度：
var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}
With "left" and "right" being the id's of the div tags.
“左”和“右”是 div 标签的 id。
回答by instanceof me
This works for me in IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).
这在 IE 7、FF 3.5、Chrome 3b、Safari 4 (Windows) 中对我有用。
Also works in IE 6 if you uncomment the clearer div at the bottom.
Edit: as Natalie Downe said, you can simply add width: 100%;to #containerinstead.
如果您取消注释底部更清晰的 div，也适用于 IE 6。
编辑：正如 Natalie Downe 所说，你可以简单地添加width: 100%;到#container。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#container {
overflow: hidden;
border: 1px solid black;
background-color: red;
}
#left-col {
float: left;
width: 50%;
background-color: white;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
}
</style>
</head>
<body>
<div id='container'>
<div id='left-col'>
Test content<br />
longer
</div>
<div id='right-col'>
Test content
</div>
<!--div style='clear: both;'></div-->
</div>
</body>
</html>
I don't know a CSS way to vertically center the text in the right div if the div isn't of fixed height. If it is, you can set the line-heightto the same value as the div height and put an inner div containing your text with display: inline; line-height: 110%.
如果 div 的高度不固定，我不知道一种将文本垂直居中的 CSS 方法。如果是，您可以将 设置line-height为与 div 高度相同的值，并放置一个包含文本的内部 div display: inline; line-height: 110%。
回答by Calin Don
As far as I know, you can't do this using current implementations of CSS. To make two column, equal height-ed you need JS.
据我所知，您不能使用当前的 CSS 实现来做到这一点。要制作两列，等高，您需要 JS。
回答by Calin Don
By using css property --> display:table-cell
通过使用 css 属性 --> display:table-cell
div {
border: 1px solid #000;
margin: 5px;
padding: 4px;
display:table-cell;
width:25% ;position:relative;
}
body{display:table;
border-collapse:separate;
border-spacing:5px 5px}<div>
This is my div one This is my div one This is my div one
</div>
<div>
This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>