HTML / CSS：使两个浮动div的高度相同 [英] HTML/CSS: Making two floating divs the same height
问题描述
我有一个特殊的问题，我目前解决使用表，见下文。基本上，我想有两个div占据100％的可用宽度，但只占据所需的垂直空间（这不是真的从图片显而易见）。
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.
这是很容易做的使用 table 我现在在做。但是，我不太热衷于解决方案，因为在语义上这不是一个表。
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.
推荐答案
CSS中的高度列，通过应用大量的底部填充，相同量的底部负边距，并且使用具有溢出隐藏的div来围绕列。垂直居中的文本有点棘手，但这应该帮助你的路上。
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.
#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>
值得一提的是，以前的回答是由streetpc有无效的html，doctype是XHTML，并且在属性周围有单引号。还值得注意的是，为了清除容器的内部浮动，你不需要一个额外的元素 clear 。如果你使用overflow隐藏，这将清除所有非IE浏览器中的浮动，然后只是添加一些东西给hasLayout，如宽度或缩放：1将导致IE清除其内部浮动。
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 that you dont need an extra element with clear on 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.
我已经在所有现代浏览器FF3 + Opera9 + Chrome Safari 3+和IE6 / 7/8测试了这一点。它可能看起来像一个丑陋的伎俩，但它的工作原理很好，我在生产中使用它很多。
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.
我希望这有助于。
这篇关于HTML / CSS：使两个浮动div的高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
