Currently, I'm struggling with creating a container div that consists of a header, content area, and footer. The goal is to have the footer always stuck to the bottom while the content area fills the remaining space. Unfortunately, I haven't been able to achieve this yet.
This is my current setup:
.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>It's evident that the content section doesn't stretch all the way to the footer section. What could be missing in my implementation?
Appreciate any help you can provide!