如何修复网站中容器的垂直滚动条问题？

问题根源 #

你遇到的滚动条是因为浏览器默认给<body>元素设置了margin（通常是8px），当.albums设置min-height:100vh时，这个高度加上body的margin会让总高度超过视口，触发滚动条。另外overflow:auto会在容器内容溢出时显示滚动条，但如果内容没溢出，它本身不会导致滚动条，主要问题还是视口高度的计算偏差。

具体修复步骤 #

• 清除body的默认边距：给body添加CSS重置，消除默认的margin和padding，避免影响视口高度计算：

  body {
    margin: 0;
    padding: 0;
  }
  

• 移除不必要的overflow:auto：如果.albums的内容不会超出视口高度，直接去掉这个属性，它仅在内容真的溢出时才需要使用。
• 检查父元素布局：如果.albums还有父容器，确保父容器没有额外的padding、margin或者固定高度，避免嵌套布局导致的高度溢出。

调整后的完整示例 #

body {
  margin: 0;
  padding: 0;
}

.albums {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  gap: 10px;
  flex-wrap: wrap;
}

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