Responsive design: why do zero heights and padding work to make divs sensitive?

Question

After looking at the Zurb Foundation code, I noticed that they used a CSS approach like this to give a responsive div square:

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

I used this approach for some new projects (still in the private dev), but I 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 happened? Thanks!

Answer 1

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

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

And therefore, if you add the same size for all parties, all parties have the same percent fill. This refers to one dimension (width) and NOT the width and height. which will distort the gasket if the element was not square.