I am working on a website project that requires a fixed header, variable content, and a footer that sticks to the bottom of the page when there is not enough content. To achieve this layout, I plan to utilize the CSS Grid Layout.
Expanding the content section based on known height is straightforward:
div {
border-width: 1px;
border-style: solid;
}
#container {
width: 200px;
height: 200px;
display: grid;
grid-template-rows: auto 1fr auto;
}<div id="container">
<div>hello </div>
<div>world</div>
<div>three</div>
</div>However, when attempting to apply this concept to a full window browser, I encountered a challenge. I needed a way to instruct the application to "take up the entire browser height if there isn't enough content, otherwise adjust to fit the content". My initial approach with min-height: 100%; for the body element did not yield the desired result:
body {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr auto;
min-height: 100%;
}
.navbar {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 3;
}
.main {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
}
.toc {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}
.footer {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;
}
While this code successfully defines the grid layout, it does not ensure that the body element occupies the full height of the browser: