响应式设计:为什么高度为零 &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.

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