html - 在固定页眉/页脚之间滚动 DIV

Question

我想使用一个具有固定页眉/页脚和中间可滚动 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 上不起作用，不知道为什么......

Answer 1

如果页眉和页脚有明确的高度，则可以简单地通过绝对定位中间 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>