Question

使用与纯css相同的高度，至少支持ie9和良好的浏览器是一种痛苦。所以，我决定改用js。如果在用户端没有启用js，那么我的问题就越少。

但是，我对这个＆＃34;相等的身高有一个非常具体的要求＆＃34;情况。

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

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： 。容器{ 显示：flex; }

.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);
}

如果您的网站具有响应能力，您可以将其置于某个功能中并在$（窗口）上调用.resize

通过脚本等高

1 个答案: