1

这是 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 中无效。滚动条位于页脚后面。有人可以解释一下我该如何解决这个问题吗？

4

4 回答 4

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/

如果你认为可以的话，我会取消盒子尺寸。

于 2013-01-28T07:36:19.577 回答
1

如果你想摆脱 box-sizing，我也想出了这个

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 以及 ie

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

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

于 2013-01-28T07:56:04.123 回答
0

尝试在你的正文中添加这行代码

 -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/

于 2013-01-28T07:54:10.220 回答
-2

滚动条在页脚后面，因为你的身体类有 height:100%;.so 看到这个链接 jsfiddle.net/sfctB/23/

于 2013-01-28T07:06:18.620 回答