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

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

它们的两个高度均应可变，并且如果左侧的内容比右侧的内容高，则左侧列应可滚动。

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

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

最佳答案

默认样式适用于右列。

对于左边的一个：

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

页面加载时工作正常。如果即使在页面加载后内容也会更改，则必须将上面的代码绑定到事件（更改内容）。

希望对您有帮助。

关于html - CSS —两列，一列是静态的，另一列是可滚动的，并且已最大化到第一列的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18320773/