css - 滚动条在 Firefox 中位于页脚后面

Question

这是 jsfiddle 链接:

http://jsfiddle.net/sfctB/20/

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
}

基本上，我希望滚动条只出现在内容区域中，而页眉和页脚应该始终出现。以上链接在 Chrome 和 IE 中有效，但在 Firefox 中无效。滚动条位于页脚后面。谁能解释一下我该如何解决这个问题？

Answer 1

您需要在正文中添加-moz- 和-webkit- 以及其他必要的前缀。

body
{
padding: 60px 0px;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;   // if supported?
-ms-box-sizing: border-box;  // if supported?
}

http://jsfiddle.net/sfctB/53/

如果你认为可以，我会取消盒子大小。