Often you face a situation where you don't have enough content on the webpage to make use of the space available in the browser window. A good example, for this is the "404 - File not found" page on your site.
I use the following technique to get rid of the situation where the footer doesn't stick to the bottom of the page. The idea is simple - Measure the height of the content and compare it with your window height. If the content height is less than the window height, then fill the difference with an empty space or to say exactly, add a div with the height set to the difference.
The code below uses jquery javascript library and should work pretty much in every browser.
Enjoy !!
Update:
I have updated the code above, to make sure that the footer sticks to the bottom on window resize events. Now when you are using FireBug, to should notice the footer moving up and down and window resize events. This is especially useful if you have a large monitor.
0 Comments