asked on

How do I position a footer and make it stay there when scrolling

I have a footer <div> that is absolutely positioned to be { bottom: 0px; left: 0px }, which works great, except when the content <div> on my page is longer than the the user's browser window. This causes the footer to overlay the content <div>, which is fine, but when the user scrolls down, the footer stays where it is. Is it possible with CSS to make the footer *stick* to the bottom of the browser window. I found I can use a floating div, but this requires JavaScript, and I'd rather just use CSS.

Here is an example - click on the "set height" link and scroll down - you'll notice that the footer stays in the same spot, rather than sticking to the bottom of the browser window.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Static Footer</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div#content {
width: 100%;
background: #eee;
height: 300px;
border-top: 1px solid black;
border-bottom: 1px solid blue;
padding-top: 30px;
text-align: center;
}
div#footer {
position: absolute;
bottom: 0px;
left: 0px;
background: #ffd;
height: 20px;
width: 100%;
border-top: 1px solid red;
}
</style>
</head>

<body>

<div id="content">
<a href="?" onclick="document.getElementById('content').style.height='1000px'; return false">Set height to 1000px</a>
</div>

<div id="footer"></div>

</body>
</html>

mraible

ASKER

I found this is possible with the position: fixed property, but it doesn't work in IE.

http://www.w3.org/Style/Examples/007/menus.html

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mraible

ASKER

I had to change document.body to document.documentElement to get this to work in standards-compliant mode on IE6, but yes this does work.

Reference: http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/index.html

Do you know of a simple way to implement this so it works in IE5.5/6.0 on Windows in XHTML mode? I don't have 5.5 to test with. Here's my current version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Static Footer</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div#content {
width: 100%;
background: #eee;
height: 400px;
border-top: 1px solid black;
border-bottom: 1px solid blue;
padding-top: 30px;
text-align: center;
}
div#footer {
position: absolute;
top: expression(document.documentElement.scrollTop + document.documentElement.clientHeight - offsetHeight);
left: expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
background: #ffd;
height: 20px;
width: 100%;
border-top: 1px solid red;
}
body>div#footer {position: fixed; bottom: 0px; left: 0px}
</style>
</head>

</head>
<body>

<div id="content">
<a href="?" onclick="document.getElementById('content').style.height='1000px'; return false">Set height to 1000px</a>
</div>

<div id="footer"></div>

</body>
</html>

redasys

Try using % unstead of pixels.

avner

mraible , for a cross browser solution use frames, in the bottom frame pu the footer, this makes your life much easier.

You can also have two IFRAMES for that.

COBOLdinosaur

You can get it to work for version prior to 6 this way:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>">

<html>
<head>
<title>Static Footer</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div#content {
width: 100%;
background: #eee;
height: 400px;
border-top: 1px solid black;
border-bottom: 1px solid blue;
padding-top: 30px;
text-align: center;
}
div#footer {
position: absolute;
top: expression(document.documentElement.scrollTop + document.documentElement.clientHeight - offsetHeight);
left: expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
background: #ffd;
height: 20px;
width: 100%;
border-top: 1px solid red;
}
</style>

</head>

</head>
<body>

<div id="content">
<a href="?" onclick="document.getElementById('content').style.height='1000px'; return false">Set height to 1000px</a>
</div>

<div id="footer"></div>

</body>
</html>

COBOLdinosaur

Glad we could help. Thanks for the A. :^)

Cd&