css - 响应式设计 : Why does height zero & padding-bottom work for making a div responsively sized?

Question

在查看 Zurb Foundation 的代码后，我注意到他们正在使用这样的 CSS 方法来允许响应式方形 div:

.div{
    position:relative;
    width:33%;
    height:0;
    padding-bottom:33%;
}
.divInner{
    position:absolute;
    width:100%;
    height:100%;
}

我一直在一些较新的元素中使用这种方法(仍在私有(private)开发中)，但不知道浏览器是否支持它，也不知道为什么高度甚至能够模拟宽度大小。有谁知道为什么会这样？谢谢!

Answer 1

第二个元素相对于容器绝对定位。这是相对定位的。

在 CSS 中，基于百分比的填充是相对于元素的宽度的。这就是产生方形效果的原因。

这也是为什么如果向所有边添加相同大小的内边距，则所有边都具有相同百分比的内边距。它是相对于一个测量值(宽度)而不是宽度和高度。如果元素不是正方形，这将导致填充倾斜。