Making page span full page height

**Titan85** · 06-05-2007, 07:28 PM

Hey, I am trying to make a page span the full height of the browser window even if there is not content to make it that large. I have tried height: 100%; but that doesn't work. Any suggestions on how to do this? Thanks

**Veronica** · 06-05-2007, 07:50 PM

Assuming you had a page with content and a footer, you'd wrap them in a container div, and set the container and the html height to 100%. I put in different colors, so you could see that even thought the content div is short, the footer would still appear at the bottom of the page.

So if this is in the body:

Code:

<body>
<div id="container">
<div id="content">header</div>
<div id="footer">footer</div>
</div>
</body>

The style would be:

Code:

<style>
html, body {height: 100%;}
#container {height: 100% position:relative;}
#content  {background-color:red;}
#footer {background-color:blue; position: absolute; bottom: 0;}
</style>

**alexjewell** · 06-05-2007, 11:28 PM

Veronica's on the right track there. You can get fancy with JavaScript, too, if that fails to work.

**Titan85** · 06-06-2007, 03:41 PM

Thanks, got it working, but am having a few issues with getting it right on a centered layout. I'll play around with it a little more and may need some help if I can't get it. Thanks again

**Titan85** · 06-06-2007, 10:10 PM

Ok, I actually have one more question. When the content of the page is longer than the browser window, how do I set it to move the footer down and not keep it at the bottom of the screen? Thanks in advance

**Veronica** · 06-07-2007, 01:18 AM

That gets trickier, as IE doesn't do min-height. This should work around that.

Code:

<html>
<body>
<style>
html {height: 100%;}
body{height: 100%;}
#content{position: relative;min-height: 100%;}
* html #content{height: 100%;}
#footer{position: relative;margin-top: -2em;}
</style>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>

If you google "css footer" you'll find other options. This page http://css-discuss.incutio.com/?page=FooterInfo has some decent links.

**Titan85** · 06-07-2007, 05:40 AM

Ok, its working now. Thanks for all the help.

Thread: Making page span full page height

Thread Tools

Search Thread

Making page span full page height

Bookmarks

Bookmarks

Posting Permissions