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

Question

我很难找到有关如何执行此操作的资源。 ( This 和 this 对我来说似乎不起作用)。我想要两列，并排，高度相等——由右列的高度决定。

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

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

有什么办法吗？

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

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

希望对你有帮助。