使用主滚动条的视差内容区域

Question

尝试设置页面，其中html为overflow: hidden，页眉和页脚是固定的，正文内容为overflow: scroll。

目前的问题是，滚动条出现在内容div中。是否可以设置＆＃34; primary＆＃34;浏览器滚动条只与内容div交互？

Revalent CSS：

html {
   overflow: hidden;
}
header {
   position: fixed;
   width: 100%;
   height: 15%;
}
footer {
   position: fixed;
   width: 100%;
   bottom: 10%;
   height: 5%;
}
#content {
   position: fixed;
   height: 80%;
   max-width: 960px;
   margin: 0 auto;
   overflow: scroll;
}

以下是概念：http://jsfiddle.net/6gcfx/（请记住，这不是根据需要移动内容的主滚动条。）

Answer 1

如果您使用的是百分比高度（如问题所示），您可以这样做，在页眉和页脚上使用position:fixed，在身体上使用position:absolute

html { overflow: hidden; }
header {
    position: fixed;
    top: 0;
    height:15%;
    width: 100%;
    background: #ccc;
}
#content {
    overflow: scroll;
    height: 70%;
}
footer {
    position: fixed;
    bottom:0%;
    height:15%;
    width: 100%;
    background: #ccc;
}

如果页眉和页脚的高度不是百分比，则可以使用calc()代替。但是，这种方法generally requires more modern browsers，因此如果您希望支持旧浏览器，则必须使用javascript备用

html { overflow: hidden; }
header {
    position: fixed;
    top: 0;
    height:75px;
    width: 100%;
    background: #ccc;
}
#content {
    position:absolute;
    top:75px; /* Height of header */
    overflow: scroll;
    height: calc(100% - 125px); /* 100% - (headerHeight + footerHeight) */
}
footer {
    position: fixed;
    bottom:0%;
    height:50px;
    width: 100%;
    background: #ccc;
}

Answer 2

原谅我的新意，但我想我看到了你的问题。 将内容div切换为

#content {
position:float;
top:(header size);

将页眉和页脚切换到

position:fixed;

因此内容应滚动页面滚动条，页眉/页脚不动。