Static CSS Div at the bottom of the screen

My boss asked me to create a div at the bottom of the screen for a project I’m working on. He wanted the same functionality as having frames without using the ‘f’ word.

I was also keen not to use Javascript to do it, as this has all kinds of issues cross browser.

I had a chat to my mate Google, who knows everything. It seems this is not a trivial thing.

The different browsers support CSS differently (of course) and although getting it to work in Firefox is pretty easy, IE throws a whole toolbox worth of spanners into the mix.

After a bunch of research, and a bit of playing around I found a way to do it in Firefox and IE without using Javascript (sort of).

Here’s what I did:

Create the CSS for Firefox

#footer{

POSITION: fixed;

height: 100px;

LEFT: 0px;

border: solid 1px black;

bottom: 0px;

width: 100%;

background: #C2DFFF;

}

Then the CSS for IE

* html div#footer {

position: absolute;

top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));

}

Then another Div to go at the bottom of your content.

#content-padding{/*this should be the same height as the footer to enable it to be visible once Firefox scrolls to the bottom of the page*/

bottom: 0px;

height: 100px;

clear: both;

}

This is rock solid in Firefox and a little jittery in IE, but not at all bad really. It also works better than anything I found on the web

Feel free to have a go with it and see how it turns out for you.