footers in css

[Paingod]

is there an easy(well atleast not needing three coding languages and a phd in astrophysics) way to make a page with a header and footer. The footer is always at the buttom of the browser window, and the content between the header and footer scrolls (if it is needed). I am fairly new to this all....so any halep or pointers will be greatly appreciated....

Oh yeah and im trying to position it all with css....is this my mistake?....


I really have no code yet...just been playing with tutorials i have found.

[ronaldb66]

Although I think it's a general misconception that headers and footers should be fixed to the viewport/window instead of starting and closing the document/page, the easiest way to implement this would be using frames or an iframe (for the main section).
If an iframe is used, you'll probably need some hoop-jumping to work out the proper heights.

This thread about sticky footers might open up possibilities for a CSS solution, though: http://www.codingforums.com/showthread.php?t=70608&highlight=footer

[sonofjack]

I've been working on a site with a similar set up.
The way I've done it is

#banner {
width: 750px;
height: 70px;
background-color: black;
color: white;
}

#main {
height: 450px;
width: 750px;
background-color: gray;
overflow: auto;
font-size: 10pt;
}

#footer {
height: 70px;
width: 750px;
background-color: black;
}


and then the html simply have

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


The overflow: auto bit will provide a scroll bar if the content is bigger than the dimensions.

[ronaldb66]

Giving all major page sections a fixed height won't keep the footer fixed to the bottom, though: it'll scroll drop below the window if it's too small anyway.

You may be onto something with the overflow:auto bit, though; I'll give this a shot.

[sonofjack]

Maybe absolute positioning of the footer with bottom: 0px; or something?
Perhaps putting everything above the footer (height 20%) into a container which is of 80% height of the page, or something like that?
I'm not too sure.

[ronaldb66]

I've trying the ALA suggestion made in the other thread right after my first post, and it sort of worked; I threw away the page though, and trying to recreate it just now failed miserably: IE is acting up in all sorts of ways; I can't even get a colored header anymore! I'll stop before I go nutty.

[mrruben5]

position: fixed. Thats the key.

Though internet explorer won't support it, so use the starhack to give it normal absolute positioning. IE also has a bug with overflow, so if you set the overflow on html to hidden and the overflow on body to auto position:absolute will appear as it's position fixed :). Note that you can't use position absolute anymore then :(* html { overflow: hidden }
* html body { overflow: auto }

#footer {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
}

* html #footer {
position: absolute;
}
This code is also friendly for IE7, as IE7 will supprt fixed positioning and won't read the universal selector bug ( html is a child of ehhhh.... what? )