Next.js中滚动至页面底部时body黑色背景无法铺满问题求助

你遇到的问题是因为body元素的高度未覆盖整个滚动区域，滚动到底部时露出了子组件的紫色背景。可以通过以下两种方法解决：

方法一：同时设置html和body的背景与高度 #

修改globals.css中的样式，给html元素也添加黑色背景，并确保两者高度覆盖视口及滚动区域：

html, body {
  background-color: black;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  font-family: 'Titillium Web', sans-serif;
}

min-height: 100vh会让元素至少占满整个视口高度，当页面内容超过视口时，元素高度会自动延伸，黑色背景也就会铺满整个滚动区域。

方法二：仅给html设置黑色背景 #

如果不想修改body的高度设置，也可以直接给html元素设置黑色背景，这样即使body没有覆盖整个滚动区域，html的背景也会显示为黑色，不会露出子组件的紫色：

html {
  background-color: black;
}
body {
  background-color: black;
  padding: 0;
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
}

另外可以检查Layout.tsx中的layout-main元素，确认是否设置了min-height: 100vh或类似属性导致其高度超出body，如果有可以调整该元素的高度设置，避免其背景暴露。

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