制作可以在其下方滚动内容的侧边栏的最佳方法是什么？

【问题标题】：What is the best way to make a sidebar that can have content scrolling underneath it?制作可以在其下方滚动内容的侧边栏的最佳方法是什么？
【发布时间】：2013-04-30 16:49:21
【问题描述】：

我正在尝试制作一个基本上是这种结构的页面：

我想要做的是将内容放在滚动幻灯片中的较大区域中，并将内容滚动到白色侧栏下方的左侧。看起来很简单，但我尝试了许多不同的结构，但不确定最好的方法。

我已经制作了一个图块并将其放入主体中并重复-y，这会产生正确的视觉结果，但是我无法将内容包装器放到它下面的 z-index 中。我试图让侧栏达到 100% 的高度。

【问题讨论】：

标签： html css z-index

【解决方案1】：

根据您的浏览器支持选项，您最好尝试Flexbox。虽然它仍然是新的并且在旧浏览器中相对不受支持，但all the new browsers support 至少是它的“旧”版本。

Chrome 支持新的 flexbox 规范，FF 也将支持该规范。如果您选择使用旧版 flexbox，则不必担心您的设置与新规范冲突，因为它们使用完全不同的选项。

无论你选择什么，我知道你会喜欢 flexbox！我在我最近的项目中使用过它，它比浮动更好:)

祝你好运！

【讨论】：

【解决方案2】：

我知道我已经回答了，但是如果您正在寻找一个短期解决方案，您可以尝试欺骗您的布局，使其认为它是一个表格：

#outerwrapper {
    display: table;
    height: 100%;
}
#topbar { 
    display: table-row;
}
#innerwrapper {
    display: table-row;
    height: 100%;
}
#innerwrapper .leftdiv {
    display: table-cell;
}
#innerwrapper .rightdiv {
    display: table-cell;
}

未经测试，但经过一些调整应该可以工作。

【讨论】：

是的，这正是我想要的，谢谢。 html 结构会是什么样子？只是不确定如何整合 id 的类。
#outerwrapper > #topbar + #innerwrapper > .leftdiv + .rightdiv
这还不清楚。我不知道您的意思是“>”和“+”。你能更具体或更进一步吗？

等...谢谢
> 是子代（如 CSS），+ 是兄弟（如 CSS）。 Here's a fiddle
感谢您的努力，但我找到了一个非常简单的解决方案。看我的回答

【解决方案3】：

body {
 width:100%;
 height:100%;
 line-height: 1;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 font-weight:300;
}
.content_wrapper {
 width:960px;
 margin:0px auto 0px auto;
}
.side_bar {
 width:250px;
 height:100%;
 background:#efeff0;
 position:fixed; right:0px; top:94px;
}
<div class="content_wrapper clearfix">
    </div>
    <div class="side_bar">
</div>

【讨论】：