当内容动态变化时边栏的等高

Question

我有两栏页的侧边栏和内容，都给予同等高度的窗口负载和寡妇调整大小。有反应了。

我使用jquery插件mixitup (https://mixitup.kunkalabs.com/)动态地排列内容区域中的块。

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

​

​

Answer 1

在过去，我尝试过一些方法(使用Javascript)来改变大小，以满足您的要求。老实说，这不是个好办法。

如果将侧边栏和内容都包装在容器中，那么您可以很容易地做到这一点。我建议使用柔性箱。您的代码可能如下所示：

HTML：

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

CSS：

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

以下是柔性盒指南：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);
}

然后，您可以在页面加载和任何页面大小调整之后运行此操作。您可能会想要检查，看看您是否已经到了一个堆叠布局的移动，只是设置高度自动在这种情况下。