In a recent project this common problem with the footer came up. The one where the footer won’t stay at the bottom of the browser window. If you position it absolutely then the content will overlap it when it’s taller than the browser. If you don’t then on short pages then you get a gap at the bottom; most noticeable on tall screens.
This is not a problem if you build it into the design. For instance purposely designing it to scroll behind the footer, or simplifying it to the point that it doesn’t look like a footer and can exist in the center of the page like Mozilla does.
So i had the problem where the one page was way shorter than the others. So there was a noticeable gap below the footer; especially since there was a large background image that was “position: fixed;” and took up the entire height of the page; and then some. I didn’t want a gap above the footer either.
So here’s the solution.
<br />
html {<br />
background-image: ('images/footerbackground.png');<br />
}<br />
body {<br />
display: block;<br />
padding-top:1px;<br />
background-image: ('images/bodybaground.png');<br />
background-repeat: no-repeat;<br />
background-attachment: fixed;<br />
}<br />`
“display: block;” makes the body have the height of the content leaving the html background exposed at the bottom below the footer. That way it appears that the footer extends all the way down.
“padding-top:1px;” forces the body to recognize elements that might have margin top. Otherwise the margin will extend beyond the body and create a gap between the body and the top of the browser. This trick works on other items also. If you ever get an odd gap at the top of something and you can’t figure out where it’s coming from. Try this. Nine times out of ten it’s a problem with margins over extending.