Wrapper div to have full viewport height regardless of content

I have this wrapper div with a background image.
I wish have it flowing from the top, right to the bottom of the screen.

However it falls short if the contents are not long enough.

I’d tried declaring wrapper as relative position with top:0px and bottom:0px. Doesn’t work.

I tried declaring body as relative position with the same properties, doesn’t work too.

How should I do it?

html, body, #wrapper { min-height: 100%; }

Like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
    height:100&#37;;
}
#wrapper {
    width:100%;/* or whatever it needs to be*/
    min-height:100%;
    background:red;
}
* html #wrapper {height:100%}
p {margin:0 0 1em}
</style>
</head>
<body>
<div id="wrapper">
    <p>test</p>
</div>
</body>
</html>


See faq on 100% height for more info :slight_smile:

That won’t work I’m afraid as you can’t base a percentage height when the parent element that has only min-height applied. html,body need to be height:100% :slight_smile:

cool Paul…it works now. i missed out giving html a height:100% too.
thanks CyberAlien too. :slight_smile:

No, don’t give it height:100% also. Your code should be

html,body{height:100%;}
#wrapper{min-height:100%;}
* html #wrapper{height:100%;/*IE6*/}

:slight_smile:

S/He got it right, Ryan, the Wrapper wasn’t meant.

Ah, well as I understood it (s)he forgot to add it on, thus I thought her/his resulting code would be

html,body,#wrapper{height:100&#37;;min-height:100%;}

:x