Footer postitioning problems (not as easy as you think)

  • Hi, I’ve been developing my new theme on my local server (hence not able to give you a link to it) and I am almost done but I am having a problem with the footer and it’s driving me nuts.

    I want the footer to always be at the bottom of the page but, here’s where it gets tricky…

    If the page content is too small to fill a full page I would like the page to “fill out” to 100% so the footer finds itself at the bottom of the browser window when it would otherwise not have been. And if the page is longer than the browser window I just want the footer to tag onto the bottom of the content.

    A bit like wrapping something in a table which is set to 100% height, the bottom of the table is always at the bottom of the screen regardless of the contents length.

    It’s not as easy as you might think though. I have tried changing the CSS for the footer to make the position:fixed; and tell it to stick to the bottom. While this works it means that if the content of the blog is longer than that it carries on under the footer and you have to scroll down the page with the footer covering content. It also breaks the background colour of the page which only shows up to where the footer would normally be tagged on – I want this to extend to the footer at the bottom.

    Using position:relative; just tags the footer on as normal. Using absolute just makes it appear at a given location on the page permanantly no matter the length of content.

    I have also tried using the min-height and height attributes but no luck there either.

    Any ideas? I am tearing my hair out and figured somebody here must have done something like this…

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter fluKe

    (@fluke)

    I almost had a brainwave a minute ago. I found by using the “padding-top” attribute I was able to move the footer down to the bottom of the page by padding inbetween where it was and where I wanted it to be.

    However again there is a problem with this, on pages with content that is longer than the browser window the padding still applies at the bottom meaning there is an unecessary huge gap between the end of the content and the end of the page.

    Does anyone know if it is possible to dynamically assign the amount of padding used? eg. calcualte the height of the page and if it is smaller than the window use the difference as padding… I think to do that though you would need to use DOM and it would be very complicated for what I want to do.

    There must be a more sensible way…

    Did you resolve this?

    If you’re using floats, you need to “clear: both” so they don’t affect the footer. A search here for “footer, clear:both” will turn up various posts regarding this.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Footer postitioning problems (not as easy as you think)’ is closed to new replies.