Hundred Percent Height

From CSS Discuss

Jump to: navigation, search

Setting a div to fill up the whole window is not as simple as setting it's height to 100%. The reason this doesn't work is that percentages (when used as the unit on height or width; text size is another story) are relative to their parent dimensions. If you haven't set a height on the parent, the div with 100% height has nothing upon which to base its own height.

The other problem is that you probably don't really want 100% height. You probably want a minimum height of 100%. This means that if your page is longer than the viewport (browser window), the background of the div will still continue with the content. The body element equates to the viewport, so if you set something to 100% of the viewport, it will only take up the viewport, and stop at the height of the browser window. min-height is what you really want.

Contents

The basic CSS

So here's the code:

html, body {
height: 100%;
}
#container { /* this is the div you want to fill the window */
min-height: 100%;
}

Hacking Internet Explorer

Internet Explorer (IE) 6 and below doesn't support min-height, so it needs to be hacked. Add this to your stylesheet:

* html #container {
height:100%
}

Another Solution that works with every browser

If you don't mind permanent scrollbars on the right side of your browser just give the div a constant height that is bigger than the browserdisplay:

#container { /* this is the div you want to fill the window */
height: 2000px;
}

Articles

Create Pages that Fill the Browser with CSS by Zoe Gillenwater at Community MX

Related Pages

When you create a page that fills the browser window, a common accompanying effect is to pin the footer to the bottom of the browser window. See Footer Info for more information on ways to accomplish this.


Java Script Solutions

Making web pages extend to the bottom of the browser window

Personal tools