Is it possible to have a hidden footer just below the screen's bottom and allocate the remaining height to content children without inheriting max-height all the way down?
The "Grand child" element is not occupying the full height:
body {
margin: 0;
}
header {
height: 60px;
background-color: lightseagreen;
}
main {
/* adjusts the position of the footer */
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
}
.content-child {
flex: 1;
}
.content-grand-child {
height: 100%;
}
footer {
height: 100px;
background-color: darkslategray;
}
/* styles added for demonstration */
.content-child,
.content-grand-child {
box-sizing: border-box;
border: 4px solid;
}
.content-child {
border-color: red;
}
.content-grand-child {
border-color: green;
}<header>Header</header>
<main>
<div class="content-child">
<div class="content-grand-child">Grand child</div>
</div>
</main>
<footer>Footer</footer>Are there alternative methods to achieve this layout?