Html 使两个浮动的 CSS 元素具有相同的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1172088/
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 Two Floated CSS Elements the Same Height
提问by Damien
I have two elements which can vary in heights and both floated next to each other. The problem is that it looks pretty ugly if one box is higher than the other. So I want them to be the same height.
我有两个元素，它们的高度可以不同，并且彼此相邻浮动。问题是如果一个盒子比另一个高，它看起来很丑陋。所以我希望它们的高度相同。
One way I thought might work would be too to wrap them in a container div and hope the taller one resizes it and the smaller one expands to fit the space:
我认为可能可行的一种方法是将它们包装在容器 div 中，并希望较高的调整其大小，较小的扩大以适应空间：
HTML:
HTML：
<div id="outerBox">
<div class="innerBoxLeft"></div>
<div class="innerBoxRight"><br /><br /><br /></div>
</div>
CSS:
CSS：
.outerBox
{
width: 100%;
}
.innerBoxLeft
{
float:left;
width: 45%;
height: 100%;
}
.innerBoxRight
{
float:right;
width: 45%;
height: 100%;
}
Doesn't work. I believe this may be because the outer div doesn't have a set height and for some reason the smaller box and it's 100% height has nothing to work on. I cannot give it a set height however because that would defeat the point.
不起作用。我相信这可能是因为外部 div 没有设置高度，出于某种原因，较小的盒子和 100% 的高度没有任何作用。然而，我不能给它一个设定的高度，因为这会破坏这一点。
So unless there is a another way, I guess I am asking: How can I set a child element's height to that of it's parent?
所以除非有另一种方式，我想我在问：如何将子元素的高度设置为其父元素的高度？
Thanks
谢谢
回答by buti-oxa
Why don't you use a table?
为什么不用桌子？
This is getting ridiculous. User wants to see a table. HTML language provides a table element to achieve exactly the goal user wants. Yet, we use a whole library (I an looking at JQuery answer) to achieve the goal w/o a table even though it means a script running on client!
这越来越荒谬了。用户想要查看表格。HTML 语言提供了一个表格元素来实现用户想要的目标。然而，我们使用整个库（我正在查看 JQuery 答案）来实现没有表的目标，即使这意味着在客户端上运行脚本！
回答by zeroDivisible
I think that tables should be used for what they were created for - and that is storing data, not showing layout.
我认为表格应该用于创建它们的目的 - 即存储数据，而不是显示布局。
If You want good, cross-browser & hack-free CSS solution - check this article.
如果您想要好的、跨浏览器和无黑客的 CSS 解决方案 -请查看这篇文章。
回答by Damien
Vote this down to infinity if you like but I think I might as well wack this part of the design in a table...
如果您愿意，可以将其投票到无穷大，但我想我还不如将设计的这一部分放在表格中......
回答by Sinan ünür
There are several ways with varying degrees of complexity and success. One technique that works for me (I do not remember where I saw it firstlink, problems) is the following:
有几种方法具有不同程度的复杂性和成功。一种对我有用的技术（我不记得我在哪里看到它的第一个链接，问题）如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
#page {
clear:both;
overflow:hidden;
width:100%;
}
#page div {
margin:0 0 -6000px 0; /* nothing special about 6000px */
padding:0 0 6000px 0; /* any large enough value will do */
}
div.article {
background:blue;
float:left;
width:70%;
}
div.sidebar {
background:red;
float:right;
width:30%;
}
</style>
</head>
<body>
<div id="page">
<div class="article">
<p>Some content</p>
</div>
<div class="sidebar">
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</div>
</div>
</body>
</html>
回答by Andrew
Percentages rarely work as heights in CSS. To make the child height the same as their parent, you can use a bit of Javascript. Here's what it would look like in jQuery:
百分比在 CSS 中很少用作高度。要使孩子的身高与父母的身高相同，您可以使用一些 Javascript。下面是它在 jQuery 中的样子：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
var containerheight = $("outerBox").height;
$(".outerBox").children().css("height",containerheight)
</script>
If you wanted to just make the boxes within a container the same size, the Filament Group has a great plugin for equalizing box heights with jQuery and it's very well documented:
如果你只想让容器内的盒子大小相同，Filament Group 有一个很棒的插件，可以用 jQuery 平衡盒子的高度，并且有很好的文档记录：
回答by raven
回答by Andrew
If you really wanted a div to act like a table, you can just customize the css "display" of the div.
如果你真的想让一个 div 像一个表格一样，你可以自定义 div 的 css“显示”。
display:tablefor the container div
display:table用于容器 div
display:table-cellfor the div inside to act as td
display:table-cell里面的 div 充当 td
回答by Andrew Moore
One way to do the following without using JavaScript is via a technique called Faux-Columns.
在不使用 JavaScript 的情况下执行以下操作的一种方法是通过一种称为Faux-Columns的技术。
It basically involves applying a background-imageto the parent elements of the floated elements which makes you believe that the two elements are the same height.
它基本上涉及将 abackground-image应用于浮动元素的父元素，这使您相信这两个元素具有相同的高度。
More information available at:
更多信息请访问：
回答by Kunaal Kapoor
Try this: http://www.filamentgroup.com/examples/equalHeights/
试试这个：http: //www.filamentgroup.com/examples/equalHeights/
It's an easy to use jQuery plugin, that you can just use on the parent container and all the top level child elements are adjusted to the same height as the tallest one.
这是一个易于使用的 jQuery 插件，您可以在父容器上使用它，并且所有顶级子元素都被调整到与最高的相同的高度。
回答by megamanx
function setSameHeight(class_name){
var max_height = 0;
var cards = getElementsByClassName(class_name);
for (var i=0; i<cards.length; i++){
if (cards[i].offsetHeight > max_height){
max_height = cards[i].offsetHeight;
}
}
for (var i=0; i<cards.length; i++){
cards[i].setAttribute("height", max_height);
cards[i].height = max_height;
}
}
function getElementsByClassName(className){
var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
used that for tables
用于桌子
