我有两个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>
当前回答
你可以使用伪列。
基本上，它使用包含DIV的背景图像来模拟两个等高DIV。使用这种技术还允许您添加阴影，圆角，自定义边界或其他时髦的模式到您的容器。
不过只适用于固定宽度的盒子。
经过良好的测试，在每个浏览器都能正常工作。
其他回答
这是一个jQuery插件，它为同一行上的所有元素设置相等的高度(通过检查元素的offset.top)。因此，如果你的jQuery数组包含来自多个行(不同的offset.top)的元素，每一行将有一个独立的高度，基于该行最大高度的元素。
jQuery.fn.setEqualHeight = function(){
var $elements = [], max_height = [];
jQuery(this).css( 'min-height', 0 );
// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){
var offset_top = jQuery(el).offset().top;
var el_height = jQuery(el).css('height');
if( typeof $elements[offset_top] == "undefined" ){
$elements[offset_top] = jQuery();
max_height[offset_top] = 0;
}
$elements[offset_top] = $elements[offset_top].add( jQuery(el) );
if( parseInt(el_height) > parseInt(max_height[offset_top]) )
max_height[offset_top] = el_height;
});
// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){
if( jQuery($elements[offset_top]).length > 1 )
jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );
}
};
在寻找这个答案的时候发现了这个帖子。我刚刚做了一个小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>
var numexcute = 0;
var interval;
$(document).bind('click', function () {
interval = setInterval(function () {
if (numexcute >= 20) {
clearInterval(interval);
numexcute = 0;
}
$('#leftpane').css('height', 'auto');
$('#rightpane').css('height', 'auto');
if ($('#leftpane').height() < $('#rightpane').height())
$('#leftpane').height($('#rightpane').height());
if ($('#leftpane').height() > $('#rightpane').height())
$('#rightpane').height($('#leftpane').height());
numexcute++;
}, 10);
});
如果你不介意其中一个divs是一个主人，并口述两个divs的高度，有这个:
小提琴
无论如何，右边的div会扩展或压缩&溢出来匹配左边的div的高度。
两个div都必须是容器的直接子节点，并且必须在容器中指定它们的宽度。
相关的CSS:
.container {
background-color: gray;
display: table;
width: 70%;
position:relative;
}
.container .left{
background-color: tomato;
width: 35%;
}
.container .right{
position:absolute;
top:0px;
left:35%;
background-color: orange;
width: 65%;
height:100%;
overflow-y: auto;
}
这个问题在6年前就被提出了，但在今天，它仍然值得用flexbox布局给出一个简单的答案。
只需添加以下CSS到父<div>，它将工作。
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
前两行声明它将显示为flexbox。而flex-direction: row告诉浏览器它的子元素将显示在列中。align-items: stretch将满足这样的要求，即当其中一个子元素变高时，所有子元素将拉伸到相同的高度。
