Html 使浮动div具有相同的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16317497/
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
Make floating divs the same height
提问by Moshe Shaham
I have 2 divs side by side. I don't know the height of them upfront, it changed according to the content. Is there a way to make sure they will always be the same height, even when one of them stretches, only with CSS?
我并排有 2 个 div。我不知道它们的高度，它根据内容而变化。有没有办法确保它们始终保持相同的高度，即使其中一个伸展，也只能使用 CSS？
I made a fiddle to show. I want the red and blue divs to be the same height...
我做了一个小提琴来展示。我希望红色和蓝色 div 的高度相同......
this is the css:
这是CSS：
#wrapper {
width: 300px;
}
#left {
width:50px;
background: blue;
float:left;
height: 100%; /* sadly, this doesn't work... */
}
#right {
width:250px;
background: red;
float:left;
}
回答by antony
You could try instead of using float, use display: table-cell. You might find some older browsers don't understand this rule however. See below:
您可以尝试使用display: table-cell. 但是，您可能会发现一些较旧的浏览器不理解此规则。见下文：
#wrapper {
display: table; // See FelipeAls comment below
width: 300px;
}
#left {
display: table-cell;
width: 50px;
background: blue;
}
#right {
display: table-cell;
width: 250px;
background: red;
}
回答by luisZavaleta
Antony answer works ok, but you need all the divs to have the same parent and to have a wrapper, I have a solution that use javascript but works with any kind of element, they just need to have the same selector.
Antony 的回答没问题，但是您需要所有 div 都具有相同的父级并具有包装器，我有一个使用 javascript 但适用于任何类型元素的解决方案，它们只需要具有相同的选择器。
function setEqualHeight(selector, triggerContinusly) {
var elements = $(selector)
elements.css("height", "auto")
var max = Number.NEGATIVE_INFINITY;
$.each(elements, function(index, item) {
if ($(item).height() > max) {
max = $(item).height()
}
})
$(selector).css("height", max + "px")
if (!!triggerContinusly) {
$(document).on("input", selector, function() {
setEqualHeight(selector, false)
})
$(window).resize(function() {
setEqualHeight(selector, false)
})
}
}
setEqualHeight(".sameh", true)
回答by Cam
I would recommend reading this article that explains how to do what you are trying to do. I would put a fiddle up that shows, but its pretty extensive and pure css. http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
我建议您阅读这篇文章，该文章解释了如何做您正在尝试做的事情。我会放一个显示的小提琴，但它非常广泛和纯 css。http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
回答by Hexodus
There is a much simpler solution I want to point to. Using large padding-bottom: 500emand negative margin-bottom:-500emof the same amount on columns while the wrapper has simply overflow:hiddento cut the columns to the right size.
我想指出一个更简单的解决方案。在列上使用相同数量的大号padding-bottom: 500em和负号margin-bottom:-500em，而包装器只需overflow:hidden将列切割成合适的尺寸。
Found here: HTML/CSS: Making two floating divs the same height
在这里找到： HTML/CSS：使两个浮动 div 具有相同的高度
回答by user2313440
You can do this without using tables, by using thisCSS trick.
通过使用此CSS 技巧，您可以在不使用表格的情况下完成此操作。
Example - http://jsfiddle.net/LMGsv/
示例 - http://jsfiddle.net/LMGsv/
HTML
HTML
<div id="wrapper">
<div id="columns">
<div id="left">text</div>
<div id="right">text<br/>another line<br /></div>
</div>
</div>
CSS
CSS
#wrapper {
float:left;
width: 300px;
}
#columns {
float:left;
width:300px;
background:blue;
}
#left {
float:left;
width:50px;
background: blue;
}
#right {
width:250px;
background: red;
float:left
}
