html - float 元素 100% 高度动态包装器

Question

我在包装器中有 2 列。一列比另一列高。我想要高度为 100% 的较短的列，以便它与较高的列相匹配。所有高度都是动态的，因此不能以像素为单位定义。

演示 https://jsfiddle.net/L0Lqe4ny/

<div class="wrapper">
    <div class="col1"> short column // not much content </div>
    <div class="col2"> tall columns // lots of content </div>
</div>

您将在示例中看到红色柱比蓝色柱高。如何将蓝色列设置为包装器的 100% 高度。

我知道我可以通过定义高度轻松地做到这一点，但这不是一种选择。如果我使用表格进行布局，我也可以这样做，但我不想这样做。我还可以通过使用 javascript 从高列获取高度，然后设置较小列的高度来做到这一点。不过，我想要一种仅使用 CSS 的方法。谢谢。

Answer 1

用一点jQuery，你可以实现这个，看看https://jsfiddle.net/20d2an0n/

$(document).ready(function(){
    var blue_height = $('.col1').height();
    var red_height = $('.col2').height();
    if(blue_height < red_height)
        $('.col1').height(red_height);
    else
        $('.col2').height(blue_height);
});