Html 如何让两个并排的 div 保持相同的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2997767/
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
How do I keep two side-by-side divs the same height?
提问by NibblyPig
I have two divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. I can't figure this one out though. Ideas?
我有两个并排的div。我希望它们的高度相同，如果其中一个调整大小，则保持不变。虽然我想不通这一点。想法？
To clarify my confusing question, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.
为了澄清我令人困惑的问题，我希望两个框的大小始终相同，因此如果一个框因为文本放入其中而增大，则另一个框应增大以匹配高度。
<div style="overflow: hidden">
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!
</div>
</div>回答by Pavlo
Flexbox
弹性盒
With flexbox it's a single declaration:
使用 flexbox 它是一个单一的声明：
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>Prefixes may be required for older browsers, see browser support.
旧版浏览器可能需要前缀，请参阅浏览器支持。
回答by mqchen
This is a common problem which many have encountered, but luckily some smart minds like Ed Eliot's on his bloghave posted their solutions online.
这是许多人都遇到过的常见问题，但幸运的是，像Ed Eliot 在他的博客上的一些聪明人已经在网上发布了他们的解决方案。
Basically what you do is make both divs/columns verytall by adding a padding-bottom: 100%and then "trick the browser" into thinking they aren't that tall using margin-bottom: -100%. It is better explained by Ed Eliot on his blog, which also includes many examples.
基本上，您所做的是通过添加 a使两个 div/列都非常高padding-bottom: 100%，然后“欺骗浏览器”认为它们不是那么高，使用margin-bottom: -100%. Ed Eliot 在他的博客中对此进行了更好的解释，其中还包括许多示例。
.container {
overflow: hidden;
}
.column {
float: left;
margin: 20px;
background-color: grey;
padding-bottom: 100%;
margin-bottom: -100%;
}<div class="container">
<div class="column">
Some content!<br>
Some content!<br>
Some content!<br>
Some content!<br>
Some content!<br>
</div>
<div class="column">
Something
</div>
</div>回答by Paul D. Waite
This is an area where CSS has never really had any solutions — you're down to using <table>tags (or faking them using the CSS display:table*values), as that's the only place where a “keep a bunch of elements the same height” was implemented.
这是一个 CSS 从未真正有任何解决方案的领域——你只能使用<table>标签（或使用 CSSdisplay:table*值伪造它们），因为这是实现“保持一堆元素相同高度”的唯一地方。
<div style="display: table-row;">
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!
</div>
</div>
This works in all versions of Firefox, Chrome and Safari, Opera from at least version 8, and in IE from version 8.
这适用于所有版本的 Firefox、Chrome 和 Safari、至少版本 8 的 Opera，以及版本 8 的 IE。
回答by Derek Adair
Using jQuery
使用 jQuery
Using jQuery, you can do it in a super simple one-line-script.
使用 jQuery，您可以在一个超级简单的单行脚本中完成。
// HTML
<div id="columnOne">
</div>
<div id="columnTwo">
</div>
// Javascript
$("#columnTwo").height($("#columnOne").height());
Using CSS
使用 CSS
This is a bit more interesting. The technique is called Faux Columns. More or less you don't actually set the actualheight to be the same, but you rig up some graphical elements so they lookthe same height.
这有点有趣。该技术称为Faux Columns。或多或少，您实际上并没有将实际高度设置为相同，但是您装配了一些图形元素，使它们看起来相同。
回答by geofflee
I'm surprised that nobody has mentioned the (very old but reliable) Absolute Columns technique: http://24ways.org/2008/absolute-columns/
我很惊讶没有人提到（非常古老但可靠的）绝对列技术：http: //24ways.org/2008/absolute-columns/
In my opinion, it is far superior to both Faux Columns and One True Layout's technique.
在我看来，它远远优于 Faux Columns 和 One True Layout 的技术。
The general idea is that an element with position: absolute;will position against the nearest parent element that has position: relative;. You then stretch a column to fill 100% height by assigning both a top: 0px;and bottom: 0px;(or whatever pixels/percentages you actually need.) Here's an example:
一般的想法是，具有 的元素position: absolute;将与最近的具有position: relative;. 然后，您可以通过分配 atop: 0px;和bottom: 0px;（或您实际需要的任何像素/百分比）来拉伸一列以填充 100% 的高度。这是一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
#container
{
position: relative;
}
#left-column
{
width: 50%;
background-color: pink;
}
#right-column
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 50%;
background-color: teal;
}
</style>
</head>
<body>
<div id="container">
<div id="left-column">
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
<div id="right-column">
Lorem ipsum
</div>
</div>
</body>
</html>
回答by Starx
You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.
您可以使用 Jquery 的 Equal Heights Plugin 来完成，该插件使所有 div 的高度与其他插件完全相同。如果其中一个增长，另一个也将增长。
Here a sample of implementation
这里是一个实现示例
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights();
Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400);
Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300);
Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.
Here is the link
链接在这里
回答by Arve Systad
You could use Faux Columns.
您可以使用Faux Columns。
Basically it uses a background image in a containing DIV to simulate the two equal-height-DIVs. Using this technique also allowes you to add shadows, rounded corners, custom borders or other funky patterns to your containers.
基本上它使用包含 DIV 中的背景图像来模拟两个等高 DIV。使用此技术还允许您向容器添加阴影、圆角、自定义边框或其他时髦图案。
Only works with fixed-width boxes though.
不过只适用于固定宽度的框。
Well tested out and properly working in every browser.
经过充分测试并在每个浏览器中正常工作。
回答by Mike Wells
Just spotted this thread while searching for this very answer. I just made a small jQuery function, hope this helps, works like a charm:
刚刚在寻找这个答案时发现了这个线程。我刚刚做了一个小的 jQuery 函数，希望这会有所帮助，就像一个魅力：
JAVASCRIPT
爪哇脚本
var maxHeight = 0;
$('.inner').each(function() {
maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});
HTML
HTML
<div class="lhs_content">
<div class="inner">
Content in here
</div>
</div>
<div class="rhs_content">
<div class="inner">
More content in here
</div>
</div>
回答by connexo
The CSS grid way
CSS 网格方式
The modern way of doing this (which also avoids having to declare a <div class="row"></div>-wrapper around every two items) would be to make use of a CSS grid. This also gives you easy control on the gaps between your item rows/columns.
这样做的现代方法（这也避免了<div class="row"></div>必须在每两个项目周围声明一个-wrapper）将使用 CSS 网格。这也使您可以轻松控制项目行/列之间的间隙。
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.grid-item {
background-color: #f8f8f8;
box-shadow: 0 0 3px #666;
text-align: center;
}
.grid-item img {
max-width: 100%;
}<div class="grid-container">
<div class="grid-item">1 <br />1.1<br />1.1.1</div>
<div class="grid-item">2</div>
<div class="grid-item">3
<img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
3.1
</div>
<div class="grid-item">4</div>
<div class="grid-item">5 <br />1.1<br />1.1.1</div>
<div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
6.1</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9 <br />1.1<br />1.1.1</div>
<div class="grid-item">10</div>
<div class="grid-item">11
<img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
11.1
</div>
<div class="grid-item">12</div>
</div>回答by Hegwin
This question was asked 6 years ago, but it's still worthy to give a simple answer with flexboxlayout nowadays.
这个问题是 6 年前提出的，但现在仍然值得用flexbox布局给出一个简单的答案。
Just add the following CSS to the father <div>, it will work.
只需将以下 CSS 添加到父亲<div>，它就会起作用。
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
The first two lines declare it will be displayed as flexbox. And flex-direction: rowtells browsers that its children will be display in columns. And align-items: stretchwill meet the requirement that all the children elements will stretch to the same height it one of them become higher.
前两行声明它将显示为 flexbox。并flex-direction: row告诉浏览器其子项将显示在列中。并且align-items: stretch将满足所有子元素将拉伸到相同高度的要求，其中一个变得更高。
