HTML/CSS中overflow:hidden失效，如何修复父容器？

问题原因 #

你给<video>设置的overflow: hidden不会生效——这个属性是用来隐藏元素自身内部溢出的内容，但你的视频元素是因宽高比适配问题超出了父容器/视口范围，且父容器没有设置裁剪规则，才出现了横向滚动条。另外，你的<video>是绝对定位，但父元素<header id="header">默认是static定位，导致视频实际相对于<body>定位，进一步加剧了溢出问题。

修复步骤 #

1. 给父容器<header>添加定位规则和溢出裁剪
2. 调整<video>的样式，让它自适应容器且保持宽高比

修改后的CSS代码

/* 给header添加定位和溢出裁剪 */
#header {
    position: relative;
    overflow: hidden;
    /* 如果header原本无高度设置，需添加以占满视口 */
    min-height: 100vh;
}

/* 优化video样式 */
video{
    opacity: .3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 保持视频宽高比，覆盖容器且不变形 */
    object-fit: cover;
    margin: 0;
}

顺带修复HTML笔误

你的代码里有一处错误：<a href="#" class="button primary icon solid fa-download">Download/p></a>中的Download/p>应为Download，修正后：

<li><a href="#" class="button primary icon solid fa-download">Download</a></li>

原理说明 #

• position: relative给<header>建立定位上下文，让内部绝对定位的<video>相对于它定位，而非<body>
• overflow: hidden让<header>裁剪掉内部超出边界的内容，包括视频溢出的部分
• object-fit: cover确保视频保持原有宽高比，同时填满整个容器，避免宽高比不匹配导致的溢出或留白

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