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

Question

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

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

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

Answer 1

根据您的浏览器支持选项，您最好的选择可能是尝试Flexbox。虽然它仍然是新的并且在旧浏览器中相对不受支持，但所有新浏览器都至少支持它的“旧”版本。

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>