userlkjsflkdsvm userlkjsflkdsvm - 4 months ago 32
CSS Question

Responsive Scrolling div height

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

.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