This project is read-only.

How to place the footer always at the bottom even if there is not enough text in the content section

Topics: User Forum
Aug 21, 2009 at 4:56 PM

Hi all,

I want to place the footer always at the bottom regardless the height of the content section.
I use the css files and skin created by the Theme Generator but I can't find a good working solution.

in footer.css I added :
but thsi works only fine if the content section is to short but gives problems with scrolling if the content is too long.


Any advice is welcome,

Alain Christis

Sep 10, 2009 at 11:41 AM

The trick here is to adjust the Height of the content container to the height of the page.

The better practice to accomplishing this, is to set height="100%" in the css of the specified class .
The problem here is, that approach doesn't usually work.
in IE, for instance, you need to place the content in a table row which has height="100%",
while another row in the same table has height="1".

The other solution, Which I usually rather use, is setting the 'style.height' property using Javascript.
this way, you can retreive the height of the page (using window.clientHeight for example) and then compute the wanted (minimum) height of the content pane.

I put the javascript block in the file.

please let me know how  you are doing.
And if anyone has a better approach for doing this than the ones i have posted, please share!


Sep 12, 2009 at 7:08 PM

Great idea YAT - I had tried keeping a minimum height by placing a background image in the left column made to the desired height, but it just disappears in IE on short pages.