CODEWITHSUNDEEP
iphonehtmlcssresponsive-design
copenndthagen
copenndthagen

Reputation: 50742

How to set % height in fluid layout?

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 (i.e. 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?

Upvotes: 0

Views: 1740

Answers (1)

pv1
pv1

Reputation: 317

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.

Upvotes: 2

Related Questions