我想使用一个具有固定页眉/页脚和中间可滚动 div 的网站。
只有中间的 div 应该滚动,整个网站没有滚动条(这就是隐藏正文溢出的原因)。
My attempt到目前为止:
#container1 {display:block;padding-top:60px;overflow-y:scroll}
#container2 {display:none;padding-top:60px;overflow-y:scroll}
body{overflow:hidden}
滚动条显示,但右侧太多,而且它们不可滚动?
PS:不幸的是,DIV 之间的切换在 JSFiddle 上不起作用,不知道为什么......
最佳答案
如果页眉和页脚有明确的高度,则可以简单地通过绝对定位中间 DIV 并使用相对于高度的 top
/bottom
偏移来实现页眉/页脚。
然后我们可以将 overflow-y: auto
添加到中间 DIV — Example :
#divLinks {
overflow-y: auto;
position: fixed;
top: 25px;
bottom: 40px;
width: 460px;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#divLinks {
overflow-y: auto;
position: absolute;
top: 25px;
bottom: 40px;
left: 0; right: 0;
}
#page{height: 100%;width:480px;margin: 0 auto; position: relative;}
#header{position:absolute;top:0;left: 0;right: 0;z-index:998;height:25px;background:#5f5f5f}
#bottom{position:absolute;bottom:0;left: 0;right: 0;z-index:999;height:40px;background:#5f5f5f}
<div id="page">
<div id="header">Header</div>
<div id="divLinks">
<div id="container1">First<br><br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
<div id="container2"> second<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1</div>
</div>
<div id="bottom"><a href="#">First Page</a> - <a href="#">Second Page</a></div>
</div>
关于html - 在固定页眉/页脚之间滚动 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28918777/