如何为body元素底部添加可随页面滚动的渐变背景

问题原因 #

你遇到的定位异常是两个默认规则导致的：

1. 未显式设置高度时，body 元素的高度仅由内部内容撑开，当内容高度小于视口高度时，bottom 定位的参考基准会不符合预期
2. 浏览器默认会将 body 的背景传播到整个视口渲染，进一步打乱了定位逻辑

解决方案 #

只需要两步调整即可实现需求：

1. 给 html 和 body 设置最小高度，保证 body 至少撑满一屏，内容溢出时高度可以自动延伸
2. 拆分背景属性，明确将渐变定位到 body 元素的底部，不要用 fixed 固定到视口

完整可直接复用的代码：

html, body {
  margin: 0;
  padding: 0;
  /* 最小高度撑满视口，内容超过时自动延伸 */
  min-height: 100vh;
}

body {
  background-image: linear-gradient(to bottom right, #040d21, #040d21, #ffffff);
  background-repeat: no-repeat;
  /* 定位到body元素的底部，而非视口底部 */
  background-position: center bottom;
  /* 按需调整：如果只需要底部固定高度的渐变，取消下一行注释，修改第二个值为渐变高度 */
  /* background-size: 100% 300px; */
}

效果说明 #

该方案的渐变是直接绑定在 body 元素本身的底部，页面滚动时会随着 body 整体移动，既不会出现在顶部，也不会固定在视口位置。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov