I am attempting to make the middle div #content scroll when its content exceeds the available height (calculated as innerWidth - header height - footer height).
However, rather than scrolling, the div has a scrollbar that is unresponsive, and the entire page ends up with a scrollbar.
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%;
}<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>