Forum Moderators: not2easy
The topics on this forum often helped me out with HTML and CSS problems, but this time can't find a solution that satifies my needs.
Hence this firsttime post.
I need a footer div which is always displayed at the bottom of the browserwindow. So if the content is smaller than the windowheight, the footer should be at the bottom. If the content exceeds the windowheight, the footer should be pushed all the way down.
Here are my self-imposed rules:
- I want to accomplish this by using div's and CSS only (I already know how to fix the problem using frames, tables or javascript).
- It needs to work in both IE and Firefox (and preferably in other browsers).
- The footer has a fixed height
This is what I got so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<style type="text/css">
body {
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
background-color: black;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0px auto;
}
#header {
height: 100px;
padding: 20px;
background-color: red;
}
#content {
padding: 20px;
background-color: white;
}
#footer {
height: 100px;
padding: 20px;
background-color: blue;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><p>header goes here</p></div>
<div id="content"><p>content goes here</p></div>
<div id="footer"><p>footer goes here</p></div>
</div>
</body>
</html>
Any suggestions? I would be very grateful.
Thanks in forward,
Dacuz
[edited by: SuzyUK at 7:01 pm (utc) on Jan. 25, 2006]
[edit reason] No test pages, thanks. See TOS #13 [WebmasterWorld.com] [/edit]
Try doing a G search for "css footer demo" and you should find exactly what you need.
In this thread [webmasterworld.com] in the CSS Forum Library [webmasterworld.com], Lance (msg#3) gives a nice neat solution for a "sticky footer " and I think (quick sample below) that the technique can be expanded to add in a fixed height header too.. it might be worth a look.
The only "hack" that should be required is that IE/Win needs a height of 100% fed to it as it doesn't understand min-height yet and reportedly IE7 will fix this so how you feed that height is up to yourself..
here's my (very quick) rework of Lances code to include a header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {padding: 0; margin: 0; height: 100%;}#container {
min-height: 100%;
width: 780px;
margin: 0 auto;
position: relative; /* so header and footer can be positioned */
background: #ffc;
}/* this is for IE/Win only either a conditional or hack required supposed IE7 will support min-height */
* html #container {height: 100%;}
hr.footpad, hr.headpad {
margin: 0;
padding: 0;
border: 0;
height: 100px;
visibility: hidden;
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #eee;
}#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #dad;
}P {
padding: 20px;
margin: 0;
}
</style>
</head><body>
<div id="container">
<div id="header">Header</div>
<hr class="headpad" />
<p>Filler</p>
<p>Filler</p>
<!--
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
-->
<hr class="footpad" />
<div id="footer">Footer</div>
</div>
</body>
</html>
basically the container needs to be 100% high with no top/bottom padding or margin, then the content needs to be spaced by something (hence the hr's) enough to clear the required heights for the header and footer (the header and footer are actually visually sitting on top of the hr's)
You can't include top/bottom padding directly on the container, (else it will become taller than 100%) and if you do so on the header/footer you need to adjust the spacer <hr> heights accordingly
disclaimer: this is not fully tested ~ though it seems to be OK in IE/Win and FF
Suzy
