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

【问题标题】：CSS -- two columns, one static, the other scrollable and maxed out to the first's heightCSS -- 两列，一列是静态的，另一列是可滚动的并且最大化到第一列的高度
【发布时间】：2023-03-12 06:20:02
【问题描述】：

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

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

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

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

【问题讨论】：

如果你想要完全的跨浏览器兼容性，你肯定需要 javascript 来完成这项工作。您是要针对所有浏览器，还是只针对现代浏览器？
全部。好的。那我就用JS吧。

标签： html css

【解决方案1】：

默认样式适用于右列。

左边的：

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

你需要这个小 jQuery sn-p 来让它工作：

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

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

希望对你有帮助。

【讨论】：