Where are these extra pixels coming from when using percentages for height?

lnwalker

New Member
I am currently trying to use a sticky footer that I have used successfully many times before on various websites that I've built. Here is the link: http://ryanfait.com/sticky-footer/The problem this time, is that I'm trying to make this more responsive, and hence I don't want to use a specific pixel amount for the height, so I tried switching to percentages:\[code\]html, body { height: 100%; margin: 0px; padding: 0px;}#wrapper{ min-height: 100%; height: auto !important; height: 100%; margin-bottom: -25%; background: lime}#spacer{ background: blue; height: 25%; /* This should be exactly the same as #footer height. */}#footer{ background: magenta; height: 25%;}\[/code\]And here is the HTML:\[code\]<!DOCTYPE html"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="https://localhost/wordpress/wp-content/themes/TesterTheme/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper">Content goes here.</div><!-- End Wrapper --><div id="spacer"></div><div id="footer"></div></body></html>\[/code\]As I said before, when I use a specific pixel amount, like 200px, for the height (and change wrapper margin-bottom to -400px) it works fine. I've read that when you use a percentage for height, it is using a percentage of the height of the parent element and that I need to make sure to have all of the ancestor elements' heights defined. I think I do though... as body and html are the only ancestors of footer. This is actually what it does. I've measured it with a pixel ruler and the footer and spacer measure out to 25% of my view port. Yet for God knows why, a scroll bar appears on the side of my browser(Yes... it's full screen), as if the body has some how magically extended itself an extra fifty pixels or so. Please help, I've spent nine hours on this so far, searching all over and trying many different tactics but I always get the same result. Why don't the percentages yield the desired result?
 
Top