Question

我想使用一个固定页眉/页脚和中间可滚动div的网站。

只有中间的div应滚动，整个网站没有滚动条（这就是隐藏身体溢出的原因）。

到目前为止

#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偏移量与页眉/页脚的高度相关来实现。< / p>

然后我们可以将overflow-y: auto添加到中间DIV - Example：

#divLinks {
    overflow-y: auto;
    position: fixed;
    top: 25px;
    bottom: 40px;
    width: 460px;
}

＆＃13;

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}

＆＃13;

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

＆＃13;

Answer 2

在我看来，最简单的方法是使用固定元素，如下所示：

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

和

body {
    margin: 0;
    overflow: hidden;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    background-color: red;
    width: 100vw;
    height: 2em;
}

main {
    position: fixed;
    top: 2em;
    left: 0;
    width: 100vw;
    height: calc(100vh - 4em);
    background-color: green;
    y-overflow: auto;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: blue;
    width: 100vw;
    height: 2em;
}

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

2 个答案: