padding-bottom百分比基于父容器宽度计算，用于创建宽高比固定的响应式容器；需设height:0+padding-bottom撑高，内容用absolute定位填满。
为什么padding-bottom百分比能撑开容器高度
浏览器对padding-top和padding-bottom的百分比值，是相对于**父容器宽度**计算的，而不是高度。这个特性被广泛用于创建“宽高比固定”的响应式容器——比如16:9的视频框。你不需要JS监听resize，也不依赖aspect-ratio（IE/旧Safari不支持），纯CSS就能稳住比例。
关键点：必须让容器脱离文档流高度计算（即设height: 0），再用padding-bottom“撑”出所需高度空间，最后把内容（如<video></video>）用position: absolute塞进去填满。
-
padding-bottom值 = (目标高度 ÷ 宽度) × 100%，例如16:9 →56.25%（9÷16×100） - 父容器需有明确宽度（如
width: 100%或具体px/rem），否则百分比无基准 - 子元素必须绝对定位，且
top/left/right/bottom: 0才能真正铺满
完整HTML+CSS结构怎么写才不出错
常见错误是忘记清除默认样式、漏掉position: relative或误设height: auto，导致padding没效果或视频溢出。
<div class="video-wrapper"> <video controls><source src="demo.mp4" type="video/mp4"></source></video> </div>
对应CSS：
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 */
overflow: hidden;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 或 cover，按需选 */
}
- 必须给
.video-wrapper加position: relative，否则video的absolute会相对body定位 -
overflow: hidden防止视频在某些浏览器中轻微溢出边框 -
object-fit决定视频如何适配容器：用contain保全画面全貌，用cover填满但可能裁剪
不同宽高比怎么快速换算padding-bottom
别硬背数字，现场算更可靠。公式就是：(height / width) * 100%。几个常用值可以直接记：
- 4:3 →
75%（3÷4×100） - 16:9 →
56.25%（9÷16×100） - 21:9（超宽屏）→
42.86%（9÷21×100，约等于） - 1:1（正方形）→
100%
注意：如果后端返回的视频尺寸不确定，又不想写JS，可考虑用CSS aspect-ratio: 16 / 9（现代浏览器支持），但IE和iOS ≤14.5不认——这时候还是老办法最稳。
移动端全屏时视频被截断或留黑边怎么办
这是object-fit和容器约束共同导致的。当用户点全屏，浏览器可能强制拉伸容器，但padding-bottom仍按页面宽度算，造成比例错位。
- 优先检查是否在
@media里重写了.video-wrapper的padding-bottom，比如横屏时想切为4:3，却忘了加媒体查询 - 避免给
video设max-width或max-height，它们会干扰absolute + 100%的填充逻辑 - 真要兼容全屏异常，可在
video上监听webkitfullscreenchange事件，动态切class并更新padding-bottom，但多数场景没必要——只要基础结构扎实，原生全屏不会破比例
最常被忽略的一点：父级容器如果有border或padding，会改变宽度基准，导致padding-bottom计算偏移。务必确认外层没有意外的盒模型干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
