html - CSS -- 两列，一列是静态的，另一列是可滚动的并且最大化到第一列的高度

Question

我很难找到有关如何执行此操作的资源。（这和这在我的情况下似乎不起作用）。我想要两列并排，高度相等——由右列的高度决定。

它们的高度都应该是可变的，如果左边的内容比右边的高，那么左边的列应该是可滚动的。

我试过让左列绝对定位，但它只是溢出容器，即使它的溢出设置为滚动。我会设置一个最大高度，但我希望最大高度由右列动态设置。

任何想法如何做到这一点？

Answer 1

默认样式将适用于右列。

对于左边的：

.left-column {
    overflow-x: hidden;
    overflow-y: auto;
}

你需要这个小的 jQuery 片段来使它工作：

$(document).ready(function() {
    var desiredHeight = $('.right-column').height();
    $('.left-column').css('max-height',desiredHeight);
    $('.left-column').css('min-height',desiredHeight);
});

当您的页面加载时它工作正常。如果页面加载后内容会发生变化，那么您必须将上面的代码绑定到一个事件（这会更改内容）。

希望它可以帮助你。