独立于侧边栏滚动主页内容

Question

我们网站的母版页左侧有一个狭窄的栏，其中有一些菜单选项，页面内容占据了右侧的其余空间。

我试图确定允许页面内容独立于左列滚动的最佳方法。

我知道我可以为主要内容创建一个可滚动的 div，但我必须保持高度与浏览器窗口高度完全相同，以防止出现浏览器的主滚动条。如果我用 JavaScript 调整它的大小，我相信调整窗口大小时会有延迟，这看起来有点俗气。

任何人都可以想出更好的方法来构建页面，以在主页滚动时保持左栏静止吗？（注意：如果左列太高，可能还需要滚动。）

上图显示了所需的布局。我希望主要内容独立于侧边栏或标题滚动。但是，如果我只是将其设为可滚动<div>，我可以得到两个彼此相邻的滚动条（一个用于可滚动<div>，另一个用于主浏览器窗口）。

Answer 1

您可以定位左栏fixed，使其固定在窗口上，而页面的其余部分则滚动。例如，

.left-column {
  position: fixed;
}

也可以通过从底部定位它来使其独立滚动：

.left-column {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: scroll;
}