CSS Footer, even with scrolling window

HTML & CSS
1

Hello, please check out http://www.willjw.co.uk/airjet/

I want the footer (“XHTML | CSS | WillJW”) to appear at the very bottom of the browser window. So if the window scrolls down, it will be right at the bottom. But in the same sense, if there is not enough content to fill the window, it will still be at the very bottom.

The reason the background carries on at the moment is because it’s a repeated background image. The footer has the following CSS:

#bottom {
position:fixed;
width:100%;
height:25px;
text-align:center;
bottom:0px;
padding-top:15px;
padding-bottom:5px;
background:#5a5a5a url(../img/site/background_bottom.gif) no-repeat center top;
}

Please help!

  • Will
2

I believe this is what you’re looking for:

http://tagsoup.com/-dev/null-/css/fixed/bottom/0-0-0

3

No, you got the wrong idea. Let me try to explain a bit better.

If the page scrolls down, the footer will at first be out of site… you scroll to the bottom and there it is. Nothing special there! But if the page DOESN’T scroll, i still want it at the bottom of the page.

Basically, I want to hide the continuing background image that peeps out the bottom of the window (see link).

  • Will
4

Hmm, well i know what you’re asking for now but it doesn’t seem possible. Unless you can have a min-height of a wrapper div of 100% and then the footer positioned at the bottom of that wrapper but for some reason this isn’t working in my testing.

5

WORKS!! Forgot to set body height to 100% when testing.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>New Document</title>
	<style type="text/css">
		html {height: 100%;}
		body {margin: 0; height: 100%;}
		#wrap {position: relative; width: 500px; min-height: 100%; background: #eee;}
		#footer {
			position: absolute;
			bottom: 0px;
			height: 25px;
			background: #333;
			width: 100%;
		}

	</style>
</head>

<body>
	<div id="wrap">
		<div id="content"> </div>
		<div id="footer"> </div>
	</div>
</body>
</html>

I haven’t tested in IE yet.

6

To make it work in IE add:

/* for IE /
/\*/

  • html #wrap {height: 100%;}
    /**/
7

Thanks, it works. I had to change the footer to position:relative tho because it was coming up half way up the page when you had to scroll a page. Only tested in IE tho.