设置width:100vw;height:100vh后出现异常空白问题求助

问题原因 #

给元素同时设置width: 100vw和height: 100vh时出现空白，核心原因是100vw的计算包含了浏览器垂直滚动条的宽度。当第一个元素占满100vh后，页面中的第二个div会迫使浏览器出现垂直滚动条，此时100vw的宽度会超出实际视口宽度，进而导致水平方向出现空白。

而代码片段运行时显示正常，是因为代码片段的容器为iframe，其滚动条的计算逻辑和普通页面不同，不会触发该冲突。

修复方案 #

方案一：用width: 100%替换100vw #

将元素宽度改为继承父容器（body）的宽度，body会自动适配视口并减去滚动条宽度，避免超出：

#one {
  width: 100%;
  height: 100vh;
}

方案二：隐藏水平滚动条 #

如果必须保留100vw，给body添加overflow-x: hidden，强制隐藏水平滚动条：

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#one {
  width: 100vw;
  height: 100vh;
}

方案三：改用min-height: 100vh #

如果不需要元素严格固定100vh高度，用min-height: 100vh让元素最小占满视口，内容增多时自动延伸，避免强制出现垂直滚动条：

#one {
  width: 100vw;
  min-height: 100vh;
}

内容的提问来源于stack exchange，提问作者alireza sharifi pour