响应式设计：为什么高度为零＆amp; padding-bottom工作用于制作响应大小的div？

Question

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

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

我一直在一些较新的项目中使用这种方法（仍然在私人开发中），但不知道浏览器对它的支持，或者为什么高度甚至能够模仿宽度大小。有谁知道为什么会这样？谢谢！

Answer 1

第二个元素绝对相对于容器。哪个是相对的。

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

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