问题描述

背景颜色只填充到 100% 视口高度（height: 100%），但页面滚动后，超出部分没有背景颜色。

这里有几种解决方案来确保背景色覆盖整个页面，即使滚动时也不间断：

方法 1：使用 body 和 html 100% 高度

1
2
3
4
5
6
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; /* 你希望的背景色 */
}

✔ 适用场景：
如果你的内容不超过 100% 高度，整个页面仍然会被背景色覆盖。

方法 2：使用 min-height: 100vh

1
2
3
4
5
body {
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

✔ 适用场景：
如果你的页面内容比视口高度还要长，背景会自动扩展，不会因为滚动而断开。

方法 3：在 html 添加 background-color

1
2
3
4
5
6
7
8
html {
    background-color: #f0f0f0;
}

body {
    min-height: 100vh; /* 确保至少铺满视口 */
    margin: 0;
}

✔ 适用场景：
有些浏览器默认 body 的背景不会填满整个页面，而 html 设定背景色可以确保整个页面都有颜色。

方法 4：如果背景是渐变或图片

如果你使用的是 渐变背景 或 背景图片，可以这样设置：

1
2
3
4
html {
    background: linear-gradient(to bottom, #ff7e5f, #feb47b);
    min-height: 100%;
}

或

1
2
3
4
html {
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
}

✔ 适用场景：
如果你的背景是渐变色、图片或者想要固定的背景效果。