使用aspect-ratio trick的父容器中子元素height:100%失效问题

这个坑我之前也踩过！用height:0 + padding-top实现16:9宽高比的经典trick，本质是利用padding百分比基于父元素宽度计算的特性，但父元素的height:0会让子元素的height:100%完全失效——因为CSS里的百分比高度是基于父元素的content高度（也就是0），根本不会把padding算进去。下面给你几个实用的解决办法：

方案1：绝对定位填充（兼容所有浏览器） #

给父容器加上position:relative，子元素用绝对定位铺满整个容器。绝对定位的元素会参照父元素的padding box来计算尺寸，刚好能覆盖padding带来的高度：

修改后的CSS代码：

* { box-sizing: border-box; }
.controller { margin-bottom: 15px; }
.wrapper { position: relative; width: 400px; }
.aspect-ratio { 
  background-color: beige; 
  position: relative; /* 新增：让子元素的绝对定位以它为参照 */
}
.aspect-ratio.height-0 { height: 0; padding-top: 53.3%; }
.inner { 
  background-color: tomato; 
  position: absolute; /* 替换height:100% */
  top: 0; left: 0; right: 0; bottom: 0;
  border: 1px solid #222; 
}

HTML和JS保持不变，点击按钮切换后，红色子元素会完全填满米色父容器。

方案2：用Grid/Flexbox自动填充（现代浏览器友好） #

CSS Grid或Flexbox的布局模型会自动让子元素填充容器的可用空间，哪怕父元素是用padding trick实现的宽高比：

Grid版本： #

.aspect-ratio { 
  background-color: beige; 
  display: grid; /* 新增 */
}
.aspect-ratio.height-0 { height: 0; padding-top: 53.3%; }
.inner { 
  background-color: tomato; 
  height: 100%; /* 现在会生效了 */
  border: 1px solid #222; 
}

Flex版本： #

.aspect-ratio { 
  background-color: beige; 
  display: flex; /* 新增 */
}
.aspect-ratio.height-0 { height: 0; padding-top: 53.3%; }
.inner { 
  background-color: tomato; 
  flex: 1; /* 让子元素填充剩余空间 */
  border: 1px solid #222; 
}

方案3：原生aspect-ratio属性（最简洁，推荐现代项目） #

如果你的项目不需要兼容旧浏览器（比如IE），直接用CSS原生的aspect-ratio属性，完全不用padding trick，代码更清爽：

修改后的CSS：

* { box-sizing: border-box; }
.controller { margin-bottom: 15px; }
.wrapper { position: relative; width: 400px; }
.aspect-ratio { 
  background-color: beige; 
  aspect-ratio: 16/9; /* 直接设置宽高比 */
}
/* 不需要height-0和padding-top类了 */
.inner { 
  background-color: tomato; 
  height: 100%; 
  border: 1px solid #222; 
}

对应的JS也可以简化（如果还保留toggle按钮的话）：

document.querySelector('[name="toggle"]').onclick = function(){
  document.querySelector('.aspect-ratio').classList.toggle('bg-gray');
};

总结 #

• 兼容老浏览器：选方案1（绝对定位）
• 现代浏览器且想保留padding trick：选方案2（Grid/Flex）
• 新项目追求简洁：选方案3（原生aspect-ratio）

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