Objective: Implement a sticky navigation bar at the top, followed by a grid where the last row maintains its natural height and stays at the bottom of the window if there is not enough content to push it off screen.
Challenge: I am encountering difficulty in making my grid fill 100% of the height of the content, causing issues with my sticky navigation bar. The content is generated from a headless CMS using NextJS. A typical page structure looks like this:
<html>
<body>
<div id="__next">
<header></header> // should be sticky
<div> // wrapper which is set as a grid
Content from the CMS...
<footer>Also from the CMS</footer>
</div>
</div>
</body>
</html>
The header styling worked as intended:
header {
position: sticky;
top: 0px;
left: 0px;
width: 100%;
}
However, when creating custom error pages, I noticed that the footer inside the grid was not positioned at the bottom of the page when there was insufficient content. After researching and experimenting, the solution appeared to involve setting height: 100% and min-height: 100vh; for both html and body. By using grid-template-rows: 1fr auto;, the first row would expand to fill available space while the footer would shrink and align properly at the bottom.
This approach worked well for pages with minimal content. However, problems arose on regular pages with more than one row or sufficient content exceeding viewport height.
Based on the provided code snippet, the sticky navigation bar remains sticky initially but then loses its effect. This issue seems to stem from the grid container not expanding to accommodate all its content.
I have attempted various CSS properties such as grid-auto-rows: 1fr;, grid-template-rows: 1fr auto;, and grid-auto-rows: auto; without success.
How can I achieve the desired layout (sticky navigation bar outside of grid, footer inside grid at bottom of window when content is insufficient)?
Note: As I have control over the NextJS setup and CMS templates, I could move the footer out of the grid if necessary.