javascript - 通过脚本实现等高

Question

在至少支持ie9和良好浏览器的纯css中使用等高是一件痛苦的事情。所以，我决定改用js。如果用户端没有启用 js，那么高度不相等是我的问题中最不重要的。

但是，我对这种“等高”情况有一个非常具体的要求。

使用flex，在其他SO用户的帮助下，我们可以:

http://jsfiddle.net/4an5r1b3/1/

HTML

<div class="container">
    <div class="col left">
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <div class="bottom-yeah">
            <p>lorem ipsium</p>
            <p>lorem ipsium</p>
            <p>lorem ipsium</p>
        </div>

    </div>
    <div class="col right"> 
        <p>lorem ipsium</p>    
        <p>lorem ipsium</p>    
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
    </div>
</div>

CSS: 。容器{ 显示:柔性； }

.col {
    float: left;
    width: 30%;
    color: #fff;
}

.col.left {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    color: red;
}

.col.right {
    background-color: blue;
}

.bottom-yeah {
    flex-grow: 1;
    margin-top: 50px;
    background-color: yellow;
}

我想知道我们是否可以实现同样的目标，使用jquery，以便旧浏览器也能表现良好？

任何已知的脚本都可以执行此操作，这样我们就不会在这里重新发明轮子？

Answer 1

var leftHeight = $('.col.left').height();
var rightHeight = $('.col.right').height();

if (leftHeight > rightHeight)
{
   $('.col.right').height(leftHeight);
} else {
   $('.col.left').height(rightHeight);
}

如果您的网站是响应式的，您可以将其放入函数中并在 $(window).resize 上调用它