Paul_o_b - 9:13 pm on May 8, 2013 (gmt 0)
The div is greater than the 100% that you have set for the body so the margin-bottom is ignored as you have already overflowed out of the viewport.
Using height:100% on html and body is a common technique for gaining an initial 100% so that the main wrapper element can base it's percentage height on the viewport window but few people understand the implications. In essence the main-wrapper then just overflows the body when the 100% height of the viewport is exceeded and in most cases this does not really matter but as you have seen there are browsers differences on what happens next.
You should also be aware that percentage margins are based on the width of the element (even for vertical margins) so the amount of vertical margin will depend on how wide the window is open.
If you want space at the bottom then remove the height:100% from the html and body elements and the margin should apply but you will then most likely lose the percentage heights you have set.
You should really just let the content dictate the height and let things flow naturally and life becomes so much easier.:)