如何用CSS实现div向下过度滚动时延伸至视口外？

要实现向下过度滚动时显示.content的背景而非body的背景，可以通过给.content添加伪元素来创建背景延伸区域，具体修改如下：

修改后的代码 #

<!DOCTYPE html>
<html>
    <head>
        <style> 
            body{
                background-color: red;
                margin: 0; /* 清除body默认外边距，避免布局偏移 */
            }
            .content {
                margin: 2% 10%;
                padding: 5% 5%;
                background-color: #404040;
                color: lightgrey;
                position: relative; /* 为伪元素提供定位上下文 */
            }
            /* 添加伪元素实现背景延伸 */
            .content::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 5%; /* 与.content的左内边距保持一致 */
                right: 5%; /* 与.content的右内边距保持一致 */
                height: 100vh; /* 足够高的高度覆盖过度滚动区域 */
                background-color: #404040; /* 与.content背景色一致 */
            }
        </style>
    </head>
    <body>
        <div class="content">
            <p>Content</p>
            <p>spanning</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>lines</p>
        </div>
    </body>
</html>

原理说明 #

• 原方案中margin-bottom: -1000px无效的原因：外边距是元素外部的空白区域，元素背景不会延伸到外边距范围内，过度滚动时依然会显示body的背景。
• 伪元素方案：通过绝对定位的伪元素，让其高度覆盖过度滚动区域，且背景色与.content一致，向下过度滚动时就会显示该伪元素的背景，达到预期效果。
• 清除body默认外边距是为了避免伪元素定位偏移，保证视觉一致性。

内容的提问来源于stack exchange，提问作者3DartBlade