Scollbar going behind footer in Firefox

[aNaidatp]

This is the jsfiddle link:http://jsfiddle.net/sfctB/20/\[code\]html,body{ height:100%; width:100%; overflow:hidden;}body{ padding: 60px 0px; height: 100%; box-sizing: border-box;}.header{ height:60px; background:#000; color:#fff; width: 100%; position: fixed; top:0;}.body{ overflow-y: scroll; height: 100%;}.footer{ height:60px;background:#000;position:fixed;bottom:0px;width:100%;color:#fff; bottom:0}\[/code\]Basically I want the scrollbar only to appear in the content region and the header and footer should always appear at all time. The above link works in Chrome and IE but doesn't work in Firefox. The scrollbar goes behind the footer. Could anybody please explain me how do I solve this issue?