Forcing Footer to Position at the Bottom of Page

[forumposters]

How is this done? I understand it's difficult to code the CSS to work in most of the popular browsers. I could just enter the appropriate number of <br /> tags to push the footer down to the bottom on pages where the height is not all taken up by content. But, there's got to be a better way, is there not?

 

[Foamcow]

Define "page"

Do you mean the window that your web page is sitting in?
Do you mean the bottom of the page content?

That's the crux you see. Where people think of a web page they are actually thinking about the view port - i.e. the browser window.

If you want to place a footer at the bottom of the browser window then you can do so with absolute positioning. However, this means that if your content is longer than the height of the browser window your footer will sit on top of the content.

One solution is to place your content in, for example, a div which is also set to the height of the browser window minus the height of your footer. Then set the overflow of the div to auto, or hidden. This should render scroll bars if you have too much content.


In my opinion though, it is far better to just have the footer sit underneath the content. If you have a tiny amount of content add a bit of padding or a margin below it to push the footer down a bit.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[forumposters]

I like your last idea. Let me make sure I understand what you mean by that though. So, we have maybe 5 pages at most that have a small amount of content. On those pages, I will have a paragraph of content that has padding-bottom set to say 200 or 300 px. And, if the content changes length, I'll just change the number of pixles of padding each time the content changes length.

 

[feherke]

Hi

I like your last idea.

I hope that is not Foamcow's last idea.

Feherke.

http://rootshell.be/~feherke/