Css 多个分区，每个分区都有100%的高度

我有一个背景有很多层的页面（五层），应该覆盖整个页面内容（100%高度和div）

每个图层都具有以下特性：

position:relative;
width: 100%;
height:100%;
min-height: 100%;

如果页面内容很短，这些属性就可以了：div的高度是窗口的100%，所以就可以了

问题是当页面较长时（请看下面的示例）。这些层的高度为浏览器窗口的100%，而不是实际的内容高度

这是因为（我想）高度：100%属性。删除它，对于长的页面是可以的，但对于短的页面则不行

JSFiddle：

---

如何解决此问题？

在显示内容的标记中，您可以添加CSS属性

overflow

您可以使用它来修剪多余的内容，或添加滚动条

前

---

滚动较长的内容怎么样

#actual_page {
        width: 990px;
        margin: 0px auto;
        height:100%;
        overflow:scroll;
        background-color: pink;
    }

在这里拉小提琴

而不是

高度：100%

您可以尝试：

最小高度：50%

（或任何您需要的高度）

请参见此处的青色：

---

从图层CSS中删除

高度：100%

。

尝试

自动

而不是

所有
图层的高度、宽度
分区。
#actual_page {
        width: 990px;
        margin: 0px auto;
        height:100%;
        overflow:scroll;
        background-color: pink;
    }