Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responsive Design: Why does height zero & padding-bottom work for making a div responsively sized?

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!

like image 208
Nish Avatar asked Apr 09 '13 18:04

Nish


People also ask

Why does my div have zero height?

The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents.

How do I set responsive height?

For the height of a div to be responsive, it must be inside a parent element with a defined height to derive it's relative height from. If you set the height of the container holding the image and text box on the right, you can subsequently set the heights of its two children to be something like 75% and 25%.

Why height and width is not working in CSS?

While the display property is inline , height and width will not work. display :inline; By changing the display property from inline to block or inline-block , height and width should be worked properly.


1 Answers

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

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.

like image 133
laymanje Avatar answered Oct 21 '22 16:10

laymanje