CSS背景渐变无法覆盖含滚动内容的整页问题求助

问题核心在于html元素未设置高度基准，导致body的百分比高度规则失效，同时背景渐变的尺寸未适配body的实际高度。按以下步骤修改即可解决：

1. 给html元素设置height: 100%;，为body的百分比高度提供父级参照
2. 给body设置min-height: 100%;，确保至少覆盖视口高度，内容超出时自动撑开
3. 搭配background-size: cover让渐变拉伸覆盖整个body区域，同时保留background-repeat: no-repeat防止重复

修改后的SCSS示例：

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0; /* 移除默认margin避免出现滚动条或空白边距 */
  background: linear-gradient(180deg, #your-start-color, #your-end-color);
  background-repeat: no-repeat;
  background-size: cover;
}

如果希望渐变固定在视口（滚动内容时背景保持不动），可以替换background-size: cover为background-attachment: fixed，实现更直接的固定效果：

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background: linear-gradient(180deg, #your-start-color, #your-end-color);
  background-attachment: fixed;
}

为什么之前的尝试无效？ #

• height: auto：body默认就是该值，仅由内容撑开，但渐变默认尺寸为视口高度，内容超出后自然触发重复
• min-height: 100%：未给html设置height:100%时，body的100%没有参照基准，规则实际不生效
• background-repeat: no-repeat：仅禁止重复，但渐变尺寸仍为视口高度，内容超出后会出现空白而非重复，你看到的重复可能是浏览器默认行为或其他样式冲突，必须配合background-size才能彻底解决

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