当内容超出可用高度时进行div滚动

Question

我正在尝试让我的中间div int在其内容的高度超过可用高度时滚动（由innerWidth定义 - 标题高度 - 页脚高度）。

相反，div有一个不滚动的滚动条，整个页面都有一个滚动条。

#content

body {
	margin: 0;
}
#header {
	background-color: silver;
	height: 100px;
	width: 100%;
}
#content {
	overflow: scroll;
}
#footer {
	background-color: silver;
	bottom: 0px;
	height: 100px;
	position: fixed;
	width: 100%;
}

Answer 1

给#content一个固定的高度，它会起作用。现在它不起作用，因为#content具有动态高度，而不是在溢出时滚动（因为它永远不会溢出），它将会扩展。

请参阅下面的代码段。

（我将body和html设置为height: 100%，将#content的高度设置为calc(100% - 200px)以填充未填充的所有空间或页脚）。

body, html {
	margin: 0;
    height: 100%;
}
#header {
	background-color: silver;
	height: 100px;
	width: 100%;
}
#content {
	overflow: scroll;
    height: calc(100% - 200px);
}
#footer {
	background-color: silver;
	bottom: 0px;
	height: 100px;
	position: fixed;
	width: 100%;
}

<div id="header">header</div>

<div id="content">
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>q<br>x<br>y<br>z<br>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>q<br>x<br>y<br>z<br>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>q<br>x<br>y<br>z<br>
</div>

<div id="footer">footer</div>