内容物动态变化高度时侧杆的高度相等

Question

我有一个带有侧边栏和内容的双栏页面，在窗口加载和寡妇调整大小时都给出了相同的高度。页面响应迅速。

我正在使用jquery插件 mixitup （https://mixitup.kunkalabs.com/）来动态排列内容区域中的块。

问题是当块数改变并且内容区域的高度也发生变化时，重新调整侧边栏的高度。

Answer 1

在过去，我尝试过（使用Javascript）改变大小以匹配您所要求的大小。老实说，这不是一个好的解决方案。

如果您将侧边栏和内容都包装在容器中，那么您可以轻松完成此操作。我建议使用flexbox。您的代码可能如下所示：

HTML：

<div class='container'>
    <div class='sidebar'>
    </div>
    <div class='content'>
    </div>
</div>

CSS：

.container {
    display: flex;
}
.sidebar {
    flex: 1;
}
.content {
    flex: 3;
}

以下是flexbox指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

现在Flexbox得到了很好的支持，可以自动保持大小不变​​。

Answer 2

我不知道在跨浏览器的CSS中使用旧浏览器的简单方法，但如果你愿意使用一个小的javascript函数，你可以传入你想要的元素相同的高度，它将把它们全部设置到最高元素的高度。

function equalHeight($elements){
    var tallest = 0;
    $elements.height(auto);
    $elements.each(function(){
        var $this = $(this);
        if($this.height() > tallest){
            tallest = $this.height();
        }
    }
    $elements.height(tallest);
}

然后，您可以在页面加载和任何页面重新调整大小后运行此操作。你可能想检查你是否已经进入移动的堆叠布局，在这种情况下只需将高度设置为自动。