多个div，每个都有100％的高度

Question

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

每个图层都有以下属性：

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

如果页面内容很短，这些属性就可以了：div的高度为窗口的100％，所以没关系。

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

那是因为（我猜）高度：100％属性。删除它，它适用于长页面，但不适用于较短的页面。

JSFiddle：http://jsfiddle.net/cfMHm/

我该如何解决这个问题？

Answer 1

在显示内容的标记中，您可以添加CSS属性overflow http://www.w3schools.com/cssref/pr_pos_overflow.asp

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

EX。

.class {
  overflow:auto;
}

Answer 2

如何滚动更长的内容

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

在这里摆弄http://jsfiddle.net/Jammycoder/cfMHm/1/

Answer 3

而不是     height:100% 你可以试试：     min-height: 50%（或任何你需要的东西）。

在这里查看青色： http://jsfiddle.net/cfMHm/2/

Answer 4

从图层CSS中删除height:100%。