响应式设计：为什么高度为零&amp ;？ padding-bottom工作使div响应大小？ [英] Responsive Design: Why does height zero & padding-bottom work for making a div responsively sized?

问题描述

在查看了Zurb Foundation的代码之后，我发现他们使用了这样的CSS方法来允许响应式div：

After looking through Zurb Foundation's code, I noticed they were using a CSS approach like this to allow a responsive square div:

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

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

I've been using this approach on some newer projects (still in private dev), but don't know the browser support for it or why the height is even able to mimic the width size. Does anyone know why this happens? Thanks!

推荐答案

第二个元素绝对相对于容器放置。相对位置。

The second element is positioned absolutely relative to is container. Which is positioned relative.

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

In CSS, percentage based padding is relative to the width of the element. That is what creates the square effect.

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

And is also why if you add the same size padding to all sides, all sides have the same percentage of padding. It is relative to one measurement (width) and NOT both width and height. that would cause the padding to be skewed if the the element was not square.

这篇关于响应式设计：为什么高度为零&amp ;？ padding-bottom工作使div响应大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！