Question

这是jsfiddle链接：

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/

如果你认为可以，我会废除盒子大小。

Answer 2

如果你想摆脱盒子大小

，我也想出了这个

html, body {
    height:100%;
    width:100%;
    overflow:hidden;
}
body {
    padding: 60px 0px;
    height: 100%;
}
.header {
    height:60px;
    background:#000;
    color:#fff;
    width: 100%;
    position: fixed;
    top:0;
}
.body {
    overflow-y: scroll;
    position:fixed;
    bottom:0;
    top:60px;
    margin: 0 0 60px 0;
}
.footer {
    height:60px;
    background:#000;
    position:fixed;
    bottom:0px;
    width:100%;
    color:#fff;
}

适用于chrome和ff，即

http://jsfiddle.net/sfctB/67/

不知道这是否有效，但我相信它比任何需要前缀的东西更多。

Answer 3

尝试在您的身体中添加这行代码

 -moz-box-sizing: border-box;

你的身体会变得像这样

body
{
    padding: 60px 0px;
    height: 100%;
    box-sizing: border-box;
   -moz-box-sizing: border-box;

}

在firefox中正常工作...... http://jsfiddle.net/vaibviad/5HRvq/

Answer 4

滚动条位于页脚后面，因为你的身体类有高度：100％;所以看到这个链接jsfiddle.net/sfctB/23 /

滚动条在Firefox的页脚后面

4 个答案: