CSS设置height:100vh出现双向滚动条的原因及修复方案

滚动条和底部黑边问题是三个细节叠加导致的，和100vh本身的兼容性无关：

• 你给.bg-video和.overlay都设置了width: 100vw，100vw的计算值是包含浏览器垂直滚动条宽度的，只要页面出现垂直滚动条，100vw的元素宽度就会比实际可视内容区宽，直接撑出水平滚动条；
• 视频属于替换类元素，默认是行内块对齐方式，底部会自带3-4px的基线对齐间隙，这个隐形间隙会把元素总高度撑得比你设置的100vh略高，直接触发垂直滚动条；
• 全局样式没有重置盒模型，元素默认content-box规则下，内边距、边框都会额外撑大元素宽高，进一步放大溢出问题。

不需要用99vh这种凑数值的临时方案，按下面步骤改代码就能彻底解决：

1. 先修改全局基础重置样式，从根源避免溢出：

*{
    margin:0;
    padding:0;
    box-sizing: border-box; /* 新增：所有元素的内边距、边框不会额外撑大宽高 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html, body {
    overflow-x: hidden; /* 新增：裁切水平方向多余溢出，彻底消除水平滚动条 */
}

2. 修改基础样式里的背景视频、遮罩层属性，替换掉容易出问题的100vw写法，消掉元素底部隐形间隙：

.bg-video{
    width: 100%; /* 把原100vw改成100%，自动扣除滚动条宽度 */
    height: 320px;
    object-fit: cover;
    z-index: -1;
    display: block; /* 新增：去掉行内元素默认基线对齐的底部间隙 */
}
.overlay{
    background-color: black;
    width: 100%; /* 把原100vw改成100%，和视频宽度完全匹配 */
    height: 320px;
    position:absolute;
    top: 0;
    left: 0; /* 新增定位偏移，保证遮罩和视频完全对齐 */
    opacity: 0.5;
}

3. 把笔记本媒体查询里的视频高度改回100vh，同步修正遮罩层高度（原代码里遮罩只设130px，根本盖不满全屏视频）：

@media (min-width:1024px) {
    .bg-video{
        height: 100vh; /* 直接用100vh即可，不会再触发滚动条 */
    }
    .overlay{
        height: 100vh; /* 遮罩高度同步设为100vh，保证渐变遮罩覆盖全屏 */
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,1) 43%, rgba(0,0,0,0.5606617647058824) 71%, rgba(0,0,0,0) 85%);
        opacity: 0.6;
    }
    /* 其余原有笔记本端样式保持不变即可 */
}

• 做全屏铺满的背景类元素时，只要父级是已经铺满视口的定位元素，优先用width: 100%代替100vw，从根源规避滚动条宽度带来的溢出问题；
• 图片、视频这类替换元素只要出现莫名其妙的底部间隙，第一时间加display: block就能解决90%的类似问题；
• 不要用99vh这类凑数值的写法，不同系统、不同浏览器的滚动条高度、UI控件尺寸存在差异，硬编码比例值在部分设备上还是会出现黑边或者滚动条。

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