Sticky Header/Footer With 3 columns. Divs that scroll within the columns - css

Question

I have a JS Fiddle here.
https://jsfiddle.net/h3c6jqfy/
Basically, i am trying to make a UI that has a sticky header and footer. The middle content will have three columns. Each columns will have DIVs in them. These DIVs should have 100% height and not be cut off from the footer. Within the DIV, they will have scrollable divs.
The very basic layout I created has this in it...
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
The part where it says this is the end!! is never reached.

Answer 1

You can use flexbox without the need to calculate heights;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 75px;
background: red;
}
main {
flex: 1;
background: lightgreen;
display: flex;
}
.scrolly {
flex: 1 0 33%;
overflow-y: auto;
}
.content {
height: 1000px;
}
footer {
height: 50px;
background: blue;
}
<header></header>
<main>
<div class="scrolly">
<div class="content"></div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
</main>
<footer></footer>

Answer 2

NOTE: See Fiddle in Full Screen
You can try using flexbox instead of defining every unit, calculate the height to avoid using the space where the footer sits, and let the children div inherit its height
<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}
#header{
height:100px; top:0; background: #4A4A4A;
}
#footer{
height:100px; bottom:0; background: #4A4A4A;
}
#content{
top:100px;
height: calc(100% - 100px);
background:#fff;
display: flex;
align-items: stretch;
}
</style>
<div>
<div id="header">HEADER</div>
<div id="content">
<div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
<div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
<div style="overflow: auto; max-height: inherit; padding: 10px;">
<br>d<br>d<br>d<br>d<br>d<br>d<br>d
<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d
<br>d<br>this is the end!!
</div>
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
middle
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
right
</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>