使用padding-bottom维持宽高比时CSS max-height失效问题排查

以下是复现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .embedContainer{
            padding-bottom: calc((1200 / 1200) * 100%);
            position: relative;
            max-height: 60vh;
            box-sizing: border-box;
            overflow: hidden;
        }
        .embedContainer iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="embedContainer">
        <iframe src="https://www.youtube-nocookie.com/embed/8dXNoC4UviY?rel=0" scrolling="no" frameborder="0" allowfullscreen="" allowtransparency="true" allow="clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
    </div>
</body>
</html>

代码中calc((1200 / 1200) * 100%)是用padding-bottom维持视频1:1的宽高比（分子为视频高度，分母为视频宽度）。需求是当视频容器过高时，限制其不超过max-height:60vh，但设置后该属性完全无效，即使添加了box-sizing: border-box; overflow: hidden;也无法解决。

为什么max-height不生效？ #

核心原因是padding-bottom的百分比是基于容器宽度计算的，当容器宽度足够大时，padding-bottom计算出的高度会超过60vh。而max-height无法直接限制由padding撑开的容器高度：

• 即使设置了box-sizing: border-box，max-height限制的是元素的总高度（content+padding+border），但浏览器会优先满足padding的百分比计算规则（因为百分比padding的参考是父元素宽度，属于强制计算值），当padding计算出的高度超过max-height时，max-height的限制会被忽略。

解决方法 #

方法1：用aspect-ratio替代padding-bottom（推荐，现代浏览器支持） #

直接使用CSS3的aspect-ratio属性来维持宽高比，它能自动适配max-height的限制：

.embedContainer{
    aspect-ratio: 1 / 1; /* 对应视频的宽高比1:1，也可以写1200/1200 */
    position: relative;
    max-height: 60vh;
    width: 100%;
    overflow: hidden;
}
.embedContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

当容器高度达到60vh时，宽度会自动按比例缩小，确保整体尺寸不超出限制，同时完美维持视频的宽高比。

方法2：嵌套容器兼容旧浏览器 #

如果需要兼容不支持aspect-ratio的旧浏览器，可通过双层容器实现：

.embedWrapper {
    max-height: 60vh;
    width: 100%;
    overflow: hidden;
}
.embedContainer{
    padding-bottom: calc((1200 / 1200) * 100%);
    position: relative;
    height: 0; /* 清除默认高度，确保完全由padding撑开 */
    width: 100%;
}
.embedContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

对应的HTML结构修改为：

<div class="embedWrapper">
    <div class="embedContainer">
        <iframe src="https://www.youtube-nocookie.com/embed/8dXNoC4UviY?rel=0" scrolling="no" frameborder="0" allowfullscreen="" allowtransparency="true" allow="clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
    </div>
</div>

外层容器embedWrapper负责限制最大高度，内层embedContainer通过padding-bottom维持宽高比。当外层高度达到60vh时，内层容器的宽度会被挤压，padding-bottom的百分比计算值也随之缩小，从而保证整体高度不超过限制。

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