多个 div，每个 100% 高度答案

【问题标题】：Multiple div, each one with 100% height多个 div，每个 100% 高度
【发布时间】：2014-02-22 00:38:50
【问题描述】：

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

每一层都有这些属性：

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

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

问题在于页面较长时（请看以下示例）。图层具有浏览器窗口的 100% 高度，而不是实际内容高度。

那是因为（我想）是 height:100% 属性。去掉它，长页没问题，短页不行。

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

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

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

EX.

.class {
  overflow:auto;
}

【讨论】：

【解决方案2】：

如何滚动较长的内容

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：