CSS fixed position not sticking to bottom on window resize

Problem

Here is the jsFiddle of whats happening: http://jsfiddle.net/A4bzQ/1/

So, here's my problem. If you re-size the window adjusting the Height you will notice that when you get a scroll bar for the height the bottom footer will stick in position relative to the page and not the window. I would like the bottom footer to always remain on the bottom of the screen. This happens when you get the horizontal scroll bar and then you start scrolling down.

Does anyone have any solutions for this type of problem?

Thanks, Evan

Problem courtesy of: Evan Larsen

Solution

Instead of position:absolute, you want to use position:fixed.

http://jsfiddle.net/A4bzQ/2/

More on the position property: http://www.quirksmode.org/css/position.html

An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.

Solution courtesy of: Wesley Murch

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.