How do you create a fullscreen layout - css

Question

I'm currently making a NextJS app which should have a fullscreen layout that does not change regardless of zoom level. At default zoom level, you see the header, footer, toolbar, and vertically-scrollable content window
When you zoom out, the size of the header, footer, toolbar, and content window remain fixed even if the content inside them changes size
Note that there are multiple types of toolbars and content windows that may be shown depending on what the user selects. I've been able to get a header and footer working by editing _app.js, but the toolbar and content window are not taking up the full remaining space if I zoom out because there is some extra div that is injected by NextJS at some point. I'm using inline styling with material UI.
Has anyone run into this issue before?

Answer 1

This is one approach you could use for your layout, using CSS Grid. I'm defining the grid to have 12 columns, but you could set it up in any way you'd like.
Note, the following block means, start from the 3rd grid line and span to the end of the grid. This will satisfy your horizontal space requirements.
main .main-content {
grid-column: 3 / -1;
}
For the center column taking up the maximum space of the viewport, I'm using the following:
grid-template-rows: auto 1fr auto;
The first auto is the header, the 1fr is the middle section (most room), and the last auto is the footer.
Here's a demo.
.grid {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
min-height: 100dvh;
gap: 0.5rem;
padding: 0.5rem;
}
main {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.5rem;
}
main aside {
grid-column: 1 / 3;
}
main .main-content {
grid-column: 3 / -1;
}
header, main aside, .main-content, footer {
background-color: #eee;
}
header,
footer,
main :where(aside, .main-content) { padding: 0.5rem;}
html, body { padding: 0; margin: 0; }
*, *::before, *::after {
box-sizing: border-box;
}
<div class="grid">
<header>header</header>
<main>
<aside>aside</aside>
<div class="main-content">main content</div>
</main>
<footer>footer</footer>
</div>