Hey Adawi,
There's not a perfect solution for this. You could try setting up a style class like this:
.footer { position: fixed; bottom: 0px; }
However, Internet Explorer does not support the position: fixed attribute(as of IE7, not sure about IE8 beta)
You could try creating a javascript function that will constantly keep the footer element at the bottom of the screen when the window is either scrolled or resized, however this looks rather jagged as you'll see the object move all over the place before it finally rests to the bottom again.
The best way that I have found of doing it is like this:
1. Put all of your content in one large div, let's give it a class of .FakeBody
2. Set .FakeBody to the width and height to the size of the browser window, and setting overflow:scroll;
NOTE: The main con with this method is that it's not entirely
CSS. You would need to create a javascript function that detects
resizing of the browser window in order to resize .FakeBody, otherwise it won't fill up the browser window.
2. Set the body tag to overflow:hidden;. This will make the browser look like it's scrolling just like it would at any other time.
3. Take the footer element and keep it outside of the div you made in the first step
4. Set the footer element to position:absolute; bottom:0px;. This will keep it anchored to the bottom of the page.
5. If your footer element is being hidden by .FakeBody, set .FakeBody's z-index attribute to a number lower than the footer element's