练习NFT前端项目时出现垂直滚动条异常问题求助

• 清除浏览器默认边距：浏览器会给<body>和<html>默认添加8px的margin，这会让页面总高度超出视口范围，直接全局清除即可：

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

• 统一盒模型计算规则：如果你的容器设置了padding或border，但没开启box-sizing: border-box，实际高度会是设置的百分比加上内边距/边框，导致页面溢出：

  * {
    box-sizing: border-box;
  }
  

• 限制容器内内容高度：检查容器里的图片、文字是否超出了容器高度，比如给图片添加高度限制：

  .container img {
    max-height: 100%;
    object-fit: contain;
  }
  

• 确保父元素高度生效：用百分比设置容器高度时，必须保证<html>和<body>的高度设为100%，否则容器的百分比高度不会按预期计算：

  html, body {
    height: 100%;
  }
  

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