为何未显式设置高度时my-frame-container的高度为200px？

这其实是CSS中百分比内边距的计算规则导致的，咱们一步步拆解背后的逻辑：

1. 百分比内边距的计算基准是父元素宽度 #

CSS规范明确规定：元素的padding（包括padding-bottom）使用百分比单位时，计算基准是父元素的宽度，而非高度。

你的.my-frame-container的父元素是.right-modal，后者被显式设置了width:200px，所以padding-bottom:100%就等价于padding-bottom:200px。

2. height:0 + padding-bottom的占位技巧 #

你给.my-frame-container设置height:0，同时用padding-bottom:100%来撑开容器高度——这是前端实现固定宽高比容器的经典技巧。因为padding会占据容器的空间，所以容器的实际高度就等于padding-bottom的计算值（200px），和它的宽度（继承父元素的200px）一致，形成了正方形容器。

3. 子元素高度的继承逻辑 #

.my-frame-content是绝对定位元素，你给它设置了height:100%，这里的100%是相对于它的包含块（.my-frame-container）的高度，也就是200px，所以它的高度也会被限制为200px。哪怕内部的.box总高度远超这个值，因为.my-frame-container设置了overflow:hidden，超出部分会直接被隐藏。

验证方法 #

你可以试试把.right-modal的宽度改成300px，此时.my-frame-container的高度会自动变成300px，这就能直接印证上述逻辑。

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