How to make a div stretch to 100% of the window height & fixing the background color or image not covering the entire window

14th November 2009

I know, it’s massively long title, but I thought I’d fix too issues with 1 post as they both have the identical solution. The main one is when creating some sites recently they were fairly short designs and bizarrely the CSS background color didn’t fill the window. This was puzzling, but I did find a solution. The other issue is when you’re trying to make a div to stretch to fill a window, it doesn’t like to do it, the solution for this is the same as the other issue.

The Problems

a) Your background won’t fill the screen even though you’ve set the color in the body via CSS as per below:

Background doesn't fill the screen

Background doesn't fill the screen

b) Can’t get a div or other element to stretch 100% of the browser window.

The Solution

It’s quite simple, in your CSS put height: 100%; in both the html and body as follows:

html {
height: 100%;
}
body {
height: 100%;
...
}

Why does it occur?

The reasons these problems occur is because most browsers don’t automatically render the page/body to 100% of the browser windows height.  This in turn means that when the background is rendered on the body or the height is set to 100% it will only fill 100% of whatever the body is. This is why setting the html and body’s height to 100% will fix the issue.

Categories: CSS, HTML

Tags:


« Back

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home2/jasonsto/thewebdevelopmentblog.com/public_html/wp-includes/plugin.php on line 571