CSS背景渐变无法铺满整个页面仅覆盖文本区域如何解决

问题成因 #

你为body设置的height: 100%属于百分比高度，这类取值必须依赖父元素的明确高度定义才能生效。作为body父节点的<html>标签默认高度为auto，仅由内部内容撑开，你没有为其设置高度规则，最终body的实际高度和页面内容高度完全一致，所以背景渐变只会覆盖内容所在的区域。而background-size: cover是相对元素自身尺寸生效的，元素本身高度不足，自然没法铺满整个视口。

修复方案 #

根据页面内容的长度可以选择以下两种方案：

方案1：根元素高度继承 #

如果页面内容高度不会超过视口高度，可以同时为html和body设置百分比高度，让高度可以继承到视口高度：

/* 新增html标签的高度规则 */
html {
  height: 100%;
}
body{
  background-image: linear-gradient(to bottom left,#2600ff , #ffd9f5);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  /* 可选：清除浏览器默认的body外边距，避免出现白边和多余滚动条 */
  margin: 0;
}

方案2：视口单位设置最小高度 #

如果页面内容可能超过视口高度，用min-height: 100vh更合理，能保证内容不足时渐变铺满视口，内容超出时渐变也会跟着内容高度延伸：

body{
  background-image: linear-gradient(to bottom left,#2600ff , #ffd9f5);
  background-repeat: no-repeat;
  background-size: cover;
  /* 将height替换为min-height: 100vh，无需额外设置html标签高度 */
  min-height: 100vh;
  margin: 0;
}

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