CSS中100vw元素宽度超出屏幕？关于区块宽于头部问题咨询

嘿，我来帮你搞定这个宽度不一致和横向滚动条的问题！

问题根源 #

你设置了header和about-me区块都是100vw宽度，但出现了宽度差异和横向滚动条，核心原因是**100vw的计算逻辑**：当页面出现垂直滚动条时，100vw会包含垂直滚动条的宽度，而浏览器里body的实际可用宽度是100%（等于视口宽度减去滚动条宽度）。这就导致用100vw的元素会比body宽出一个滚动条的宽度，自然就出现了横向滚动条，视觉上看起来about-me区块更宽。

另外补充一句：块级元素默认就会占满父容器的宽度，其实完全没必要用100vw来强制设置满宽，反而容易踩这个坑。

解决方案 #

方案1：替换100vw为width: 100%（最推荐） #

把两个区块的宽度从100vw改成100%，这样元素会自动适配body的可用宽度，完美避开滚动条的影响：

修改后的CSS代码：

h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; }
h5{ color:white; font-size:75px; font-weight: bold; }
h4{ color:white; font-size:55px; font-weight: bold; }
body{ font-family: 'Roboto', sans-serif; margin:0; padding: 0; }
.header-bg{ 
  width:100%; /* 替换100vw为100% */
  height: 100vh; 
  background-color: black; 
  background: url('../assets/background.jpg')no-repeat center; 
  background-position: -30px -80px; 
}
#about-me{ 
  width:100%; /* 替换100vw为100% */
  height: 100vh; 
  background-color: #FFFFFF; 
  box-sizing: border-box; 
}

方案2：临时隐藏横向滚动条（不推荐，治标不治本） #

如果因为某些原因必须保留100vw，可以给body加一行overflow-x: hidden来隐藏横向滚动条，但这只是掩盖问题，可能会导致部分内容被截断，所以不建议作为长期解决方案：

body{ 
  font-family: 'Roboto', sans-serif; 
  margin:0; 
  padding: 0; 
  overflow-x: hidden; /* 隐藏横向滚动条 */
}

额外小建议 #

你的.header-bg里设置了background-position: -30px -80px，这会让背景图向左向上偏移，虽然不影响宽度，但如果不是特意要这个效果，可以改成background-position: center center，让背景图在区块里居中显示，视觉效果会更规整。

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