I have a problem with my footer, When there is not enough content on the page, The footer appears halfway up the screen.
I have 2 test pages to illustrate the problem:
Example 1 - This is good, the desired effect. The content has pushed the footer right to the bottom.
Example 2 - This is bad. There is not sufficient content to push the footer down, And so it (the footer) appears half way up the page.
I think it would be much nicer if the table could stretch 100% and always rest the footer at the bottom.
Note: I am not looking for the kind of solution where the footer is statically fixed to the bottom of the viewport and the content scrolls independatly in the middle. I want the table to stretch when there is enough content like in example 1.
I have tried a few things such as setting the body,html and table height to 100%, but this seems to invoke an unnescessary scrollbar: example
You are going to want to view Paul O'B's demo then:
Thank you, I just came across that myself.
I had hoped that this could be done without CSS positioning, As I don't own a Mac and am unable to test my work on anything but Windows & Linux browsers.
The solution is exactly what I want, however, I am averse to using all the browser specific CSS hacks which come along with that kind of advanced CSS positioning.
I've come to the conclusion that this is a rare column layout which cannot be done with tables.
It's one of those rare situations that requires browser-specific hacks, yes; however it is one of those rare situations where they are warranted.
It's not the prettiest but it's not a browser specific hack either...
For the pages that the contnet is not long enough set up a class with enough padding or margin (depending on your structure) to make up for the lack of content and push the footer down.