Question

如果页面的内容超出普通视图端口（不必滚动），我有以下代码不能覆盖整页高度。如果我向外滚动外部div显示一小部分，然后再回到白色。

为什么外部div不占用页面的整个高度，即使它需要滚动？

  html ,body {
    height: 100%;
    font-style: Helvetica;
}
.page_background, .page { margin: 0 auto; }
.page_background {
    width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #888888); /* Standard syntax */
    position: absolute;
    /*height: 100%;*/
}
.page {
    background-color: #FFFFFF;
    width: 85%;
    min-height: 100%;
    bottom: 0;
    position: absolute;
    height: 100%;
    left: 7.5%;
}

        <div class="page_background">
            <div class="page">
            </div>
        </div>

我创造了一个小提琴，以展示我在做什么。你甚至可以看到你是否在小提琴中滚动，它没有采用灰色边框。

https://jsfiddle.net/1qwwtgjp/

Answer 1

编辑：您的主要问题是CSS定位

请参见此处：https://jsfiddle.net/1qwwtgjp/3/

您在自己的样式中使用了position: absolute;，但正在寻找您的内容（以及您的背景高度）。移除所有absolute定位，包括left，bottom等，以及.page元素上的显式高度，以便它可以流到真正的高度。这将带来外包装。

所以.page类的新样式应该是：

.page {
    background-color: #FFF;
    width: 85%;
    min-height: 100%;
    /** REMOVE THESE: **/
    /* left: 7.5%; */
    /* bottom: 0; */
    /* position: absolute; */
    /* height: 100%; */
}

旧答案：

如果我正确理解您的问题，您可能根本不知道浏览器往往在<body>标记上有默认边距。

只需添加样式即可将其删除：

html, body { margin:0; }

并查看是否能解决您的问题。

Answer 2

您可以通过为最外层的包装div为overflow分配hidden属性来解决此问题。

.outerpagewrapperdiv{
    overflow:hidden;
}

Outter页面换行不设置整个页面的高度

2 个答案: