带背景图的Next.js页面出现纵向滚动条的原因及解决方法

滚动条出现的核心原因 #

即便你设置了html和body的margin、padding为0，仍出现滚动条通常是以下两种情况：

• body元素未同步视口高度且存在隐性高度溢出：body默认是块级元素，高度为auto，当内部容器高度设为100dvh时，如果body没有同步设置高度，其默认的line-height或隐含的空白节点可能会让body高度略大于视口高度，触发滚动条。
• 全局样式覆盖不彻底：部分浏览器的html或body存在隐性的默认样式，或者你在global.css中的样式选择器优先级不够，没完全覆盖浏览器默认值。

消除滚动条的具体方案 #

方案1：全局同步视口高度并隐藏溢出

在global.css中添加以下样式：

html, body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow: hidden;
}

• height: 100dvh：让html和body高度完全匹配视口
• overflow: hidden：直接隐藏超出视口的内容，彻底避免滚动条

方案2：仅调整容器样式

如果不想全局隐藏溢出，可以修改Home.module.css中的容器样式：

.container {
  box-sizing: border-box;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background-image: url('/home.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

同时确保global.css中的基础样式正确：

html, body {
  margin: 0;
  padding: 0;
}

方案3：排查图片尺寸问题

如果上述方法无效，可能是home.webp的实际尺寸超出视口，间接撑大容器。可以给容器添加限制：

.container {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  /* 其他样式保持不变 */
}

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