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

Question

我正在尝试创建一个基本上就是这种结构的页面：

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

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

Answer 1

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

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

无论你选择什么，我都知道你会爱上flexbox！我在最近的项目中使用它，它比漂浮物更好：）

祝你好运！

Answer 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;
}

未经测试，但通过一些调整它应该有用。

Answer 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>