html - 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%;
}

这使得边栏成为视口(viewport)高度的 100% - 问题是，它没有 100% 的视口(viewport)高度来显示自己，因为它被顶部的标题向下推。结果，侧边栏的一部分最终离开了屏幕，您无法滚动到它(因为侧边栏不再随主体滚动)。要解决这个问题，请删除该样式，并改用它:

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

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