CSS：使用/滚动侧边栏布置固定标题

Question

我正在尝试在this site之后对我的页面的基本结构建模 - 即特别是使用具有独立滚动侧边栏的固定标题/导航栏和正常滚动的内容面板。看来我引用的网站使用的是flexbox功能，但我需要针对较旧的浏览器（至少IE8及以上版本），所以我希望用纯CSS或jQuery的帮助来实现这个布局。

我有一个显示基本结构的fiddle set up here，基于两个主要包装器，如下所示：

.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.body-wrapper {
    margin-top: 80px;
    width: 100%;
    height: 100%;
}

然而，我的演绎问题是侧边栏不会独立滚动，因此主卷轴将导致侧边栏内容除了正文内容之外滚动，而我希望它只影响后者。

非常感谢这里的任何帮助;我愿意调整我的版本或完全不同的方法。

Answer 1

在不修改现有方法的情况下，执行此操作的一种方法是将position:fixed与侧边栏一起使用。您可以将这些样式添加到CSS中：

div#mainBody {
    padding-left:220px; /* This is how wide #list is */
}
aside#list{
    position:fixed;
}

请注意，我已将主要内容容器的ID更改为#mainBody，因为您的页面上已有#main，与标题一起使用。 （一个id必须是唯一的。）这里有JSFiddle来演示。

希望这有帮助！如果您有任何问题，请告诉我。

编辑：侧栏底部内容被切断的原因是您有以下风格：

aside#list {
    height:100%;
}

这使得侧边栏成为视口高度的100％ - 问题是，它没有100％的视口高度来显示自己，因为它被顶部的标题向下推。结果，侧边栏的一部分最终离开了屏幕，你无法滚动到它（因为侧边栏不再与身体一起滚动）。要解决此问题，请删除该样式，然后使用此样式：

aside#list {
    bottom:0;
    top:80px; /* Height of the header */
}

这将确保侧边栏从标题正下方开始，并在视口底部右侧结束。因此，滚动到侧边栏的底部将显示所有内容。这是updated JSFiddle。