Responsive Scrolling div height - html

Question

I have a footer that is fixed. I have a header that is relative. In between these containers there is the content which is set to overflow-y:auto. Meaning the scrollbar should show for only in this div container. I have a container around this content div. The height for this div is set to pixels because when percentage is used, it automatically goes to 100% and the scrollbar is not visible. It looks perfect on 100% without changing the height of the screen. However, if the user were to change the height of the screen - the user can not see all of the content in the div because the fixed footer is now covering that. When the user zooms out, there is a white space in between the footer and the div. I would like it so that when the user zooms out there isn't a white space and when the user changes the height of the screen, the user can view all of the content.
HTML
<div class="top-container">
</div>
<div class="container">
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
<footer>
</footer>
CSS
.top-container {
position: relative;
z-index: 6;
background: #fff;
padding: 40px 40px 0;
bottom: 0;
width: 100%
}
.container {
padding: 10px 0;
margin: 0 .6%;
}
ul {
padding-top: 2px;
height: 437px;
overflow-y: auto;
overflox-x: hidden;
}
footer{
background: #fff;
padding: 20px 50px;
overflow: hidden;
position: fixed;
z-index: 5;
left: 0;
bottom: 0;
width: 100%;
}
JSFIddle This JSfiddle does not accurately show my issue. The scrollbar should only be displayed in the content and not the header. Which is what it is now.
Thanks

Answer 1

.top-container {
position: relative;
z-index: 6;
background: #fff;
padding: 40px 40px 0;
bottom: 0;
width: 100%;
max-height: 60px;
background: green;
}
.container {
padding: 10px 0;
margin: 0 .6%;
overflow-y: scroll;
height: calc(100vh - 100px);
background: blue;
}
ul {
padding-top: 2px;
height: 437px;
overflow-y: auto;
overflox-x: hidden;
}
footer{
background: #fff;
padding: 20px 50px;
overflow: hidden;
position: fixed;
z-index: 5;
left: 0;
bottom: 0;
width: 100%;
}
body{
max-height: 90vh;
}
footer{
background: red;
max-height: 40px;
}
<div class="top-container">
</div>
<div class="container">
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
<footer>
</footer>
Here is the updated jsFiddle

Answer 2

.top-container {
position: relative;
z-index: 6;
background: #fff;
padding: 40px 40px 0;
bottom: 0;
width: 100%
}
.container {
padding: 10px 0;
margin: 0 .6%;
}
ul {
padding-top: 2px;
//height: 437px;
overflow-y: auto;
overflox-x: hidden;
}
footer{
background: #fff;
padding: 20px 50px;
overflow: hidden;
z-index: 5;
width: 100%;
}
Is this what you want?