css - Css 如何使单个页脚的 div 高度相同？

Question

我有这个，我想动态填充这个 div，但是 div panel-row-text 的高度不相等，我希望所有人都具有相同的高度（将采用更大的高度）并且我希望页脚相同水平或行。我尝试了所有方法，但无法弄清楚。

<div class="panel">
    <div  class=panel-row>
        <div class="panel-row-Text">
        </div>
        <div class="panel-row-footer">
        </div>
    </div>
    <div class=panel-row>
        <div class="panel-row-Text">
        </div>
        <div class="panel-row-footer">
        </div>  
    </div>
    <div class=panel-row>
        <div class="panel-row-Text">
        </div>
        <div class="panel-row-footer">
        </div>  
    </div>
</div>

Answer 1

我一直在使用这个 JavaScript + jQuery 解决方案。虽然丑陋，但它适用于旧版浏览器。

 // Equalize the height of front page boxes
function tuneFrontPage() {

    //
    $('.frontpage-promo .well').height(function () {
        var maxHeight = $('.frontpage-promo .well').max( function () { return $(this).height(); });
        return maxHeight;
    });
}

从这里拿起它： https ://stackoverflow.com/a/9189443/315168

CSS3 flexbox 可能是这个http://www.html5rocks.com/en/tutorials/flexbox/quick/的现代解决方案（从 caniuse.com 检查您的目标受众的兼容性）