如何将两个并排的div保持相同的高度？
Nib*_*Pig 419 html css html-table css3 flexbox
我有两个div并排.我希望它们的高度相同,并且如果其中一个调整大小,则保持不变.虽然我无法想象这一点.想法？
为了澄清我令人困惑的问题,我希望两个盒子总是大小相同,所以如果因为文本被放入其中而增长,那么另一个应该增长以匹配高度.
<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>Pav*_*vlo 557
Flexbox的
使用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>旧版浏览器可能需要前缀,请参阅浏览器支持.
- flexbox就像一个魅力.如果您正在开发响应式设计,并且希望第二个div在较小的屏幕中显示,则需要设置.row以显示:block; 在您的媒体查询中. (15认同)
- @NickZulu我相信你应该设置`flex-direction:column`:http://jsfiddle.net/sdsgW/1/ (5认同)
- 这对我不起作用，包括评论中的建议。.row 中的 `align-items:stretch;` 做到了这一点 (3认同)
- 这对我来说不起作用,直到我增加高度:100%; 到了儿童专栏 (2认同)
- 是否可以让一个特定的子 div 确定另一个子 div 的高度？这样，如果其他子 div 的内容发生变化，它就无法更改该特定 div 的高度 (2认同)
mqc*_*hen 145
这是许多人遇到的常见问题,但幸运的是,像Ed Eliot在他的博客上的一些聪明的头脑在网上发布了他们的解决方案.
基本上你做的是通过添加一个然后"欺骗浏览器" 使得两个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>Pau*_*ite 53
这是一个CSS从未真正拥有任何解决方案的领域 - 你要使用<table>标签(或使用CSS display: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>
这适用于所有版本的Firefox,Chrome和Safari,至少来自版本8的Opera,以及来自版本8的IE.
- 使用这个解决方案 - 忘记使用div的百分比`width`,除非你在父元素上添加`display:table`,这会搞砸. (7认同)
- 这个解决方案不适用于那些需要支持IE6/IE7的人,但我相信这是最干净的. (5认同)
- 这个答案是完美的！只是一个小小的提醒：可能会发生某些客户端需要“table”而不是“table-row” (2认同)
Der*_*air 39
使用Javascript
使用jQuery,你可以在一个超级简单的单行脚本中完成它.
// HTML
<div id="columnOne">
</div>
<div id="columnTwo">
</div>
// Javascript
$("#columnTwo").height($("#columnOne").height());
使用CSS
这有点儿有趣.该技术称为Faux Columns.或多或少,您实际上并没有将实际高度设置为相同,但是您设置了一些图形元素,使它们看起来具有相同的高度.
- 这意味着columnOne的高度始终大于columnTwo. (12认同)
- 这也仅在首次加载页面时有效.如果窗口然后调整大小,导致div调整大小,那么它们将不会保持同步 (6认同)
- 在为它们应用高度之前，您应该比较列的高度。我认为 js 是解决这个问题的最佳方法，几乎所有浏览器都启用了 js，如果没有，它们应该退出您的网站和许多其他网站。 (2认同)
geo*_*lee 16
我很惊讶没有人提到过(非常古老但可靠的)Absolute Columns技术:http: //24ways.org/2008/absolute-columns/
在我看来,它远远优于Faux Columns和One True Layout的技术.
一般的想法是,一个元素position: absolute;将与最近的父元素相对position: relative;.然后通过分配a top: 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>
- 如果右列的行数多于左列，则内容溢出。 (2认同)
Sta*_*arx 11
您可以使用Jquery的Equal Heights插件来完成,这个插件使得所有div都与其他div完全相同.如果其中一个成长,其他也会成长.
这里有一个实现示例
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.
链接在这里
http://www.cssnewbie.com/equalheights-jquery-plugin/
Mic*_*tto 10
使用 CSS Flexbox 和 min-height 对我有用
假设您有一个内部有两个 div 的容器，并且您希望这两个 div 具有相同的高度。
您将在容器上设置 ' display: flex ' 以及 ' align-items: stretch ”
然后给孩子 div 一个 ' min-height100%”
看下面的代码
.container {
width: 100%;
background: linear-gradient(red,blue);
padding: 1em;
/* important */
display: flex;
/* important */
align-items: stretch;
justify-content: space-around;
}
.child {
width: 100%;
background: white;
color: grey;
margin: 0 .5em;
padding: .5em;
/* important */
min-height: 100%;
}<div class="container">
<div class="child"><p>This is some text to fill the paragraph</p></div>
<div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
</div>这个问题是 6 年前提出的，但现在仍然值得用flexbox布局给出一个简单的答案。
只需将以下 CSS 添加到父亲<div>，它就会起作用。
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
前两行声明它将显示为 flexbox。并flex-direction: row告诉浏览器其子项将显示在列中。并且align-items: stretch将满足所有子元素将拉伸到相同高度的要求，其中一个变得更高。
小智 6
刚刚在搜索这个答案时发现了这个帖子.我只是做了一个小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
<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>
- 我使用outerHeight 来包含填充和边框。这是我认为最干净的解决方案。 (2认同)
CSS 网格方式
这样做的现代方法（这也避免了<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>