React JS中body渐变背景显示异常原因及修复合理性咨询

为什么仅设置background-image渐变不生效？ #

• HTML里的body元素默认高度是由内部内容高度决定的，如果页面内容很少（比如空页面或只有少量文本），body的实际高度会非常小（可能只有几像素），线性渐变只会在这个极小范围内渲染，视觉上就像没显示出来。
• 浏览器默认的html元素高度也不是满视口的，就算给body设height: 100%，如果父元素html没设置高度，body的100%没有参照值，依然无法铺满视口。

用height属性修复是否合理？ #

合理，但要根据场景选对取值：

• 如果需要渐变始终铺满整个视口（不管内容多少），用height: 100vh最直接，vh是视口高度单位，100vh就是占满当前浏览器窗口的高度。
• 如果希望渐变随内容高度自适应（内容多的时候body自动拉长，渐变也跟着延伸），可以同时给html和body设置height: 100%; min-height: 100vh，这样内容少的时候铺满视口，内容多的时候自动扩展。

示例代码 #

方案1：固定铺满视口 #

html, body {
  margin: 0; /* 去掉浏览器默认边距，避免出现白边 */
}

body {
  background-image: linear-gradient(to bottom right, #ff7e5f, #feb47b);
  height: 100vh;
}

方案2：随内容自适应 #

html, body {
  margin: 0;
  height: 100%;
}

body {
  background-image: linear-gradient(to bottom right, #ff7e5f, #feb47b);
  min-height: 100vh;
}

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