height:100% margin white space/block problem

I followed this css-tricks how-to, to implement a sticky footer. I was successful but noticed that the (min)-height:100% has an negative effect on when I try to apply a margin-left of right to my primaryContent div.

At a certain开发者_开发知识库 height it causes a block of whitespace to show up. The only work-around I've found so far is to use padding instead of margin. The height that this happens can be seen in my screenshot below. And I also notice if I remove the "background:inherit" line from #primaryContent div that the background of the container div stops at the same height that the margin white space problem occurs.

Any type of help is appreciated, links to the source code are: default.css index.html reset.css

Screenshot:

very strage how they let that slip here is a fix :D

look for this in the default.css

html, body, #container { 
      height: 100%; 
}

replace it with

html, body { 
      height: 100%; 
}

Im not completely sure what the explanation for why this happens it could just be an css bug but there is always a work around.

bada-bing your done!

Click the "Reference Link" at the bottom of your example URL....it points to the original source: http://www.cssstickyfooter.com/.

If you click the "How to Use the Sticky Footer Code", you'll find that because the way their/his solution is written - padding for height attributes is proper - not margins.

I read through the documentation a week or so ago - thought I saw that caveat. <find>+padding will take you right to the notation.