不使用 JavaScript 将绝对定位的 div 拉伸到文档高度的 100%答案

【问题标题】：Make an absolutely positioned div stretch to 100% of the document height with no JavaScript不使用 JavaScript 将绝对定位的 div 拉伸到文档高度的 100%
【发布时间】：2014-04-25 09:56:56
【问题描述】：

是否有任何简洁的纯 CSS 方法可以使绝对定位的 div 元素伸展到文档底部（不仅仅是浏览器的窗口）？

本质上，div 元素是模式弹出窗口的背景，覆盖了应用程序的其余部分。它应该覆盖整个页面 - 从上到下。但是，当内容大于浏览器窗口时，height 仍然只是将元素大小调整为窗口高度（内容从 div 流出）。

#background{
    background-color: green;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
#content{
    color: white;
    height: 200%; /* simulate a lot of content - just put a large value in here */
}

这样使用：

<body>
    <div id="background">
        <p id="content">a</p>
    </div>
</body>

例如，看http://jsfiddle.net/TuNSy/：绿色背景延伸到父元素的可见部分，但是当你向下滚动时，你会发现它实际上并没有一直延伸到底部。

还有几个其他问题，但不适用于我的问题：

CSS Div stretch 100% page height : 只是将元素拉伸到窗口高度，当内容大于窗口时不起作用。
Absolute position background 100% of page height ：说明了问题，但没有公认的答案，原始发布者最终使用了 JavaScript。

【问题讨论】：

标签： html css document absolute

【解决方案1】：

问题是您的绝对定位 div 比您的身体大，这就是您遇到白色背景问题的原因。如果您只是将overflow:auto; 添加到您的#background，它应该可以正确处理溢出

Example

【讨论】：

我想我的困惑是“溢出”属性的“自动”值看起来并不能完成我想要的（“如果溢出被剪裁，应该添加滚动条看剩下的内容”），所以没考虑。我猜“应该”并不意味着浏览器实际上会这样做，它们可能根本不会显示。感谢您分享如此简单且非侵入性的解决方案。