I am working with a grid layout that I want to span exactly the height of the screen - no more, no less. The grid includes a fixed header (one), a fixed footer (three), and scrollable content (two).
.grid-container {
display: grid;
grid-template-areas:
"one"
"two"
"three"
;
grid-template-rows: 33px 1fr 34px;
height: 100vh;
}
The issue I am facing is that if the content within section two becomes too large, it causes the entire grid to exceed the viewport height. This results in my footer being pushed down when ideally, I would like the content to scroll while keeping the footer in place.
I know that using position: fixed can solve this problem, but this example represents a simplified version of a more intricate grid layout. Any guidance on how to achieve this within the grid approach would be greatly appreciated. I have created a fiddle for reference. Thank you!
https://jsfiddle.net/x6stfc01/1/
Here is the HTML structure for your convenience:
<div class="grid-container">
<div class="one"></div>
<div class="two">
Start of Content
<div style="height: 5000px"></div>
End of Content
</div>
<div class="three"></div>
</div>