响应式设计：为啥高度为零和 padding-bottom 可以使 div 响应大小？

Posted 2023-03-06

【中文标题】响应式设计：为啥高度为零和 padding-bottom 可以使 div 响应大小？

【英文标题】：Responsive Design: Why does height zero & padding-bottom work for making a div responsively sized?响应式设计：为什么高度为零和 padding-bottom 可以使 div 响应大小？

【发布时间】：2013-04-01 07:43:10

【问题描述】：

查看 Zurb Foundation 的代码后，我注意到他们使用这样的 CSS 方法来实现响应式方形 div：

.div
    position:relative;
    width:33%;
    height:0;
    padding-bottom:33%;

.divInner
    position:absolute;
    width:100%;
    height:100%;

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

【参考方案1】：

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

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

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

【讨论】：

啊，是的，我认为填充只对宽度起作用。好的，非常感谢您回答@laymanje