如何将屏幕拆分为两个水平DIV都有自己的滚动条?(给出示例链接)

Question

我只是想知道怎么可能制作类似这样的东西：http://folderstudio.com/

我正在Wordpress上运行，并且正在通过儿童主题制作我的网站。它也将有一个固定的标题。

通过使用overflow: scroll和一些height: *XXX*px，我设法为每个div设置了单独的滚动条，但我希望通过height: 100%来实现这一点

非常感谢！

Answer 1

创建两个divs，每个都有自己的overflow-y: scroll，如下所示 http://jsfiddle.net/DIRTY_SMITH/ns3u7uf5/9/

这是 100% http://jsfiddle.net/DIRTY_SMITH/ns3u7uf5/11/的div

.html

<div class="box-1">
    <h1>BOX 1</h1>
    <h1>BOX 1</h1>
    <h1>BOX 1</h1>
    <h1>BOX 1</h1>
    <h1>BOX 1</h1>
    <h1>BOX 1</h1>
    <h1>BOX 1</h1>
    <h1>BOX 1</h1>
    <h1>BOX 1</h1>
    <h1>BOX 1</h1>
</div>
<div class="box-2">
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
    <h1>BOX 2</h1>
</div>

Answer 2

把它添加到你的css中：

html, body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  margin: 0;
  padding: 0;
}

然后你可以只使用100% height