How to set % height in fluid layout?

Tags: iphone,html,css,css3,responsive-design

Problem :

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?

Solution :

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.

    CSS Howto..

    How can I change Github markdown background?

    How do i add a cookie to my popup form? Built only with css and html [closed]

    How to change the css and html file at the same time

    How to hide overflow on slideshow without hiding arrows?

    How to revert back to a value in css [closed]

    How to increase checkboxes size with css which work in Google Chrome?

    How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?

    How to fix a 3x3 block of images with CSS

    how can resize dynamically the logo of the header?

    how to identify if a css class has property in extjs

    How to make a background with 45 degree lines with css?

    How to use top middle and center inside a div

    How to add border inner side of image using CSS

    How do I get these two columns to have the same height at all times - CSS?

    How to assign a css class or id to smileys?

    How to create a form for a petition? [closed]

    How to select a css class as selected dynamically in mvc

    how i can select some attribute value from in line css

    How to move items to left inside a div?

    How to improve page speed in google? [closed]

    How to get MetroUI CSS Datepicker value with javascript

    How to vertically center text overlapping an image?

    how to create table grid view fix header with long title name using only CSS?

    How to undo CSS change after clicking on another link

    How to get a list of valid values for a CSS property with javascript?

    How to override all of the CSS for a specific element?

    Paragraph Span Class and h3 Are The Same Hex Code, But Are Showing Up As Different Colors

    How to include this basic html (CSS, JavaScript) template into a php file?

    How to Troubleshoot CSS?

    JavaFX - Where is the css file for definition of StageStyle located or how can I change it?