How to set % height in fluid layout?

Question

I am designing fluid layout pages (defining everything in % in CSS) for multiple devices (desktop/tablet/mobile)

Now while I do understand that giving width:100% takes the entire viewport available width (ie available browser area) and accordingly calculates all the % widths ?

But my question is how do I set or convert any "pixel" height to % height for defining fluid layouts CSS?

Answer 1

You have to give your body styles like so...

 body {width: 100%; height: 100%; min-height: 100%; height: auto;}

As your body has a height of the viewport, anything that is a child of it can be specified using percentage, like a div 50% of the screen would be...

body div {height: 50%; min-height: 50%; height: auto;}

Remember % is inherited from its parent.