我几乎已经尝试了上面提到的所有方法，但是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方法。

这个问题在6年前就被提出了，但在今天，它仍然值得用flexbox布局给出一个简单的答案。

只需添加以下CSS到父<div>，它将工作。

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

前两行声明它将显示为flexbox。而flex-direction: row告诉浏览器它的子元素将显示在列中。align-items: stretch将满足这样的要求，即当其中一个子元素变高时，所有子元素将拉伸到相同的高度。

这是CSS从未真正有过任何解决方案的领域——你只能使用<table>标记(或使用CSS display:table* values伪造它们)，因为这是唯一实现“保持一堆元素相同高度”的地方。

< span style=" font - family:宋体;"> < span style=" font - family:宋体;"显示:表格单元;" > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > < / div > < span style=" font - family:宋体;"显示:表格单元;" > 一些内容! < / div > < / div >

这适用于所有版本的Firefox, Chrome和Safari，至少版本8的Opera，以及版本8的IE。

使用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>

我有同样的问题，所以我创建了这个小函数使用jquery jquery是每个web应用程序的一部分。

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

您可以在页面就绪事件时调用此函数

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

我希望这对你有用。

这是一个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] );

}

};