网页body底部出现多余白色边距 如何移除实现背景全铺

问题原因 #

底部出现白边、页面可小幅下滚是两个样式疏漏共同造成的：

• 全局样式仅用通配符*清除了元素外边距，没有给html、body标签设置统一背景色和高度基准，一旦有元素溢出父容器，就会直接露出浏览器默认的白色页面背景
• 类名为.light的灯光图设置了绝对定位，top:97%的定位值让图片自身部分高度溢出了父容器.hero，撑出了多余的页面高度，触发了滚动条

问题表现：页面最底部存在窄条白色边距，页面可向下小幅滚动，深色背景未完全铺满视口。

修复代码 #

把下面这段CSS加到样式文件最开头即可解决：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  /* 和hero区域设置相同深色背景，元素溢出也不会露白 */
  background-color: #1d2026;
}

可选调整 #

如果不需要灯光图溢出hero区域的发光扩散效果，可以给.hero类追加overflow: hidden属性，从根源避免内部绝对定位元素撑出额外页面高度：

.hero {
  /* 原有样式保持不变，追加下面这行 */
  overflow: hidden;
}

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