滚动时 DIV 背景颜色不填充 100% 高度答案

【问题标题】：DIV background-color does not fill 100% height when scrolling滚动时 DIV 背景颜色不填充 100% 高度
【发布时间】：2015-06-06 10:26:27
【问题描述】：

当我向下滚动时，我的 div 背景颜色仍然没有更新，它是页面底部的 100% 高度。在此处查看我的屏幕截图：

在我的JSFiddle example 上查看以下代码：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
        width: 100%; height: 100%; margin: 0 auto;
        background: orange; color: #000000;
        font-family: "Century Gothic", "Apple Gothic", Verdana, sans-serif;
}
#container {
        width: 800px; height: 100%;
        position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;
}
#page {
        background: #FFFFFF;
        padding: 1.1em;
        position: absolute; top: 0; bottom: 0; left: 3px; right: 3px
}
</style>
</head>
<body>
<div id="container">
    <div id="page">
    <u>Page Title</u>
    <br /><br /><br /><br />
    <b>Content</b><br /><br /><br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
    </div>
</div>
</body>
</html>

如何告诉 div #page 拉伸其白色背景色当我向下滚动时，进一步到页面底部？

如果我在#page 中使用min-height: 100%; 和position: relative; 它产生右侧的滚动条：

【问题讨论】：

你真的需要使用 height: 100% 吗？你可以试试 min-height: 100% 吗？

标签： html css

【解决方案1】：

将position: absolute 更改为position: relative

添加这个

#page {
  position: relative;
}

Fiddle

你可以加min-height:100%

Updated Fiddle

【讨论】：

当我将 min-height:100% 添加到#page 然后我得到滚动条也不需要滚动。
@udgru。您已将填充添加到#page 您应该删除或减少最小高度

【解决方案2】：

我已添加：

min-height: 90%
box-sizing: box-sizing;
margin-bottom: 1.1em;

到页面并去掉绝对位置。

http://jsfiddle.net/p7v39xot/4/

【讨论】：