页面出现两个垂直滚动条的原因及解决方法

问题成因 #

你的代码里给<main>元素设置了height: 100vh，强制它的高度等于视口高度，但<main>内部的长文本内容高度超过了这个值，导致<main>自身出现垂直滚动条；同时浏览器默认的html/body滚动条也会因为页面总内容高度超过视口而显示，最终形成双滚动条。

修复方法 #

最简单的方案是修改<main>的高度属性，把固定高度改成最小高度，让它能根据内容自动拉伸：

main {
  width: 100vw;
  min-height: 100vh; /* 替换原来的height:100vh */
}

这样<main>会自适应内容高度，不会出现内部滚动条，只保留浏览器原生的滚动条。

如果确实需要<main>保持固定视口高度并内部滚动，那可以给body添加overflow: hidden来隐藏全局滚动条，但这种场景很少见，更推荐上面的自适应方案。

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