我有两个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>
使用CSS Flexbox和min-height对我来说很有效
假设你有一个容器,里面有两个div,你想让这两个div有相同的高度。
你可以在容器上设置" display: flex "以及" align-items: stretch "
然后给孩子divs一个100%的“min-height”
请参阅下面的代码
.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>
我几乎已经尝试了上面提到的所有方法,但是flexbox解决方案不能正确地与Safari一起工作,网格布局方法也不能正确地与旧版本的IE一起工作。
这个解决方案适合所有屏幕,并且是跨浏览器兼容的:
.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}
@media (max-width: 767px){
.container li { display: inline-block; width:100%; min-height:auto!important;}
}
上面的方法将等于单元格的高度,对于较小的屏幕,如手机或平板电脑,我们可以使用上面提到的@media方法。
这是一个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] );
}
};