MP4视频铺满全屏异常：底部多余滚动条及侧边空白问题求助

我来帮你排查并搞定这个视频全屏显示的问题！先拆解下你代码里的几个小问题，再给你对应的修复方案：

问题根源分析 #

1. 浏览器默认样式干扰：HTML的<html>和<body>标签自带默认的margin和padding，这直接导致了侧边出现空白，还可能触发底部滚动条。
2. CSS语法错误：你给video写的样式最后多了个多余的*/，这会让浏览器解析样式时出现异常，部分规则无法生效。
3. 视口高度未完全覆盖：没给<html>和<body>设置height: 100%，导致你的绝对定位容器没法真正占满整个屏幕高度。

修复后的完整代码 #

HTML代码（无需改动，保持原样即可）

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
    <div class="video-container"> 
        <video autoplay loop muted preload="metadata"> 
            <source src="space.mp4" type="video/mp4">
            Your browser does not support this video
        </video> 
    </div> 
</body> 
</html>

CSS代码（修复+优化）

/* 先重置html和body的默认样式，确保占满整个视口 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 直接隐藏页面溢出，从根源避免滚动条 */
}

.video-container {
    position: absolute;
    top: 0;
    left: 0; /* 补充left:0，确保容器完全贴合屏幕左侧 */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-container video {
    /* 确保视频至少覆盖容器的宽高 */
    min-width: 100%;
    min-height: 100%;
    /* 保持视频比例，避免拉伸变形 */
    width: auto;
    height: auto;
    /* 居中定位，让视频始终在容器正中间 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

关键改动说明 #

• 新增html, body的样式重置：清除默认边距内边距，设置高度100%，并隐藏页面溢出，彻底解决滚动条和侧边空白的基础问题。
• 给.video-container补充left: 0，确保容器从屏幕左上角开始布局，消除侧边残留的空白。
• 删掉了video样式里多余的*/，修复语法错误，保证所有样式规则都能正常被浏览器解析。

这样修改后，视频就能完美铺满整个屏幕，不会再出现侧边空白和底部滚动条啦！

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