Body 100%

HTML & CSS
1

I’ve been trying some examples online but I’m having a hard time making this feature work. I want to have a solid color footer at the very bottom of my page with no margins.

I have followed the examples I find on Google but I always have some problems. The footer always floats at the top of the page if there isn’t enough content on the page to push it all the way to the bottom. I was told I can fix this by making the body 100% height, but that’s not working. I followed another tutorial that said I also needed to make the html tag 100%, but when I do that it still doesn’t work correctly, and it also adds scroll bars to the page.

This is what I want to do. If you look at this page below, and scroll down to the bottom of the page. You will see the white body turns to a blue body but there is no border. Even if there is small amount of content on this page, the footer is always right at the bottom.

Page: http://static.livedemo00.template-help.com/wt_35703/

I tried to do that but it doesn’t work at all.

<!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>
<title>Template Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<body>
	Lorem ipsum
	<div id="footer"
	        Lorem ipsum
	</div>
</body>
</html>

html, body 
{
	background-color: #FFFFFF;
	margin: 25px 0px 0px 0px;
	height: 100%;
}

#footer
{
	background-color: #005F8B;
	height: 200px;
}
2

Here try this. It’s very easy. http://www.visibilityinherit.com/code/sticky-footer.php Just copy the code and load it up to see it work on your end. Then add your stuff to it.

3

The sticky footer technique is explained in detail in the css faq and all other methods (apart from Erics above) are pale imitations and seldom work in all browsers.

4

Thanks, that seems to do what I need.