3

I'm using http://ryanfait.com/sticky-footer/ to make footers stay at the bottom. I was previously using height: 100%; on html and body to make it fill the whole page when the page was smaller than the viewport. However, this makes the body stop (no background) after the viewport, but the rest of the page continues. Stocky Footer doesn't have much to do with it, but it's an example of the code.
I've tried using min-height: 100%;, but that's not working either. Can't figure this one out, any help would be great.

Edit

The website is http://www.markduffymusic.com/index.php

My Head Hurts
  • 37,315
  • 16
  • 75
  • 117
Joseph Duffy
  • 4,566
  • 9
  • 38
  • 68
  • Possible duplicate: http://stackoverflow.com/q/8824831/681807 – My Head Hurts Jan 23 '12 at 22:50
  • I've update my website to be using that code, and although it now makes the pages always fit the viewport and the footer always be at the bottom of the page, the background (which was on body) does not quite work correctly. I have to put it on `body`, `#holder` and `#body` (on my site, `#pagecontainer`), which means it has funny points where the backgrounds overlap. Even with that, it doesn't always work, sometimes I get white at the bottom. Site is http://www.markduffymusic.com/index.php, if that helps? – Joseph Duffy Jan 24 '12 at 20:39
  • This happens when I make the viewport so small the footer overlaps the content of the page. I would seem that the `#pagecontainer`'s height is only the height of the `padding-bottom`, and not the height of the content within it (48px height of `#pagecontainer` vs 60px height of a div inside it, but `#pageconatiner is always 48px, the value of the padding). I'm guessing that's the problem? – Joseph Duffy Jan 24 '12 at 21:51
  • This has helped. The footer is below the viewport (if the page is bigger than the viewport). However, without removing the `height: 100%` on body, the background stops after the bottom of the viewport. With `min-height: 100%`, the footer is at the bottom of content, not the bottom of the viewport, but the background is always taking up the whole page. Thanks for the help, it's much appreciated! – Joseph Duffy Jan 25 '12 at 11:28
  • I can confirm this is now 100% working according to my tests. Thank for the help, if you wish to create an answer, I will accept it! :) – Joseph Duffy Jan 25 '12 at 15:20
  • Thanks. I have added an answer which I believe incorporates the important parts of our discussion above. I will be deleting my comments to tidy up this question so feel free to do the same - however, I would leave your very first comment. – My Head Hurts Jan 26 '12 at 09:47

1 Answers1

1

To ensure that the footer is always at the absolute bottom of the page you can use the answer provided in this question: Make div stay at bottom of page's content all the time even when there are scrollbars

For this to work with background images, you must place the background-image on a single element that takes the full height of your page, which in this case is your #holder div.

You also have two floating elements in #pagecontainer which are not being cleared, meaning the browser will not assign a set height to #pagecontainer. To resolve this you need to as overflow: hidden to the #pagecontainer element.

Here is a useful CSS Tricks article about The How and Why of Clearing Floats.

Community
  • 1
  • 1
My Head Hurts
  • 37,315
  • 16
  • 75
  • 117