Html 如何将屏幕分成两个水平分区，两个分区都有自己的滚动条？（给出了链接示例）

我只是想知道怎么可能做出类似的东西：

我在Wordpress上运行，通过一个儿童主题创建我的网站。它也会有一个固定的标题

我通过使用

overflow:scroll

和一些

height:*XXX*px

为每个div创建了单独的滚动条，但我希望通过

height:100%

---

非常感谢

创建两个

div

，每个div都有自己的

overflow-y:scroll

如下所示

这是100%的股息

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>

方框1
方框1
方框1
方框1
方框1
方框1
方框1
方框1
方框1
方框1
方框2
方框2
方框2
方框2
方框2
方框2
方框2
方框2
方框2
方框2
方框2

将此添加到css中：

html, body {
  height: 100%;
  min-height: 100%;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
}

---

然后你可以使用

100%高度

Tsukasa已经解决了这个问题。他想知道如何在

100%的高度下使用这个