Div with 100% height with Display: Grid - html

Question

I have a container div that has a header, a content area and a footer. And I want the footer to always be stuck to the bottom, while the content area always fills the remaining space. And I don't know how to do that.
This is what I have currently:
.container {
display: grid;
/*position: relative;*/
grid-template-columns: 1fr;
border: 1px solid black;
}
.header {
background-color: yellow;
display: grid;
grid-template-columns: 3fr 3fr 3fr 1fr;
padding: 10px 0;
}
.content {
background-color: teal;
position: relative;
display: grid;
grid-template-columns: 1fr 7fr 1fr;
padding: 15px 20px 20px 0;
min-height: 100%;
}
.footer {
background-color: maroon;
position: absolute;
width: 100%;
bottom: 0;
}
<div class="container">
<div class="header">This is a header.</div>
<div class="content">This is a content area.</div>
<div class="footer">This is a footer.</div>
</div>
As you can see, the content section doesn't stretch all the way to the footer section. What am I missing here?
Thanks!

Answer 1

Use grid-template-rows: auto 1fr auto; - this way footer and header will take only space that they need, and content will take everything else. Also, remove position: absolute; from footer to make it a grid-item.
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
border: 1px solid black;
min-height: 100vh;
}
.header {
background-color: yellow;
padding: 10px 0;
}
.content {
background-color: teal;
padding: 15px 20px 20px 0;
min-height: 100%;
}
.footer {
background-color: maroon;
width: 100%;
}
<div class="container">
<div class="header">This is a header.</div>
<div class="content">This is a content area.</div>
<div class="footer">This is a footer.</div>
</div>

Answer 2

<script>
$(document).ready(function(e) {
var h = $( window ).height();
$('.container').css('max-height', h-220+'px');
});
</script>
This is for container height if your footer height is 220px. You can change the height as per your need.
<style>
.footer{ bottom:0; position:fixed; }
</style>
This is for footer to fixed at bottom.