Is it possible to ensure the footer stays at the bottom of pages with limited content?

HTML & CSS
1

Hello,
I’m using a grid layout and have everything set up as desired, but on pages with limited content, the footer appears right where the content ends. Is there a way to ensure the footer always stays at the bottom of the pages with limited content?

This is how the footer appears when there isn’t enough content on the page. I believe it would look better if it were positioned at the bottom of the page, especially given its dark background:

page
page1920×885 25.6 KB

Of course, this isn’t an issue when there is enough content to fill the screen.

Here’s the my example:

I would appreciate any suggestions on how to achieve this.

1 Like
2

If you change your html to move the footer below the .grid_container div, and add this css, it should work:

body {display:flex;margin:0;padding:5px;flex-direction:column;min-height:100vh}
.grid-container {flex:1;height:auto}
2 Likes
3

Assuming you aren’t going to change the structure of the grid container I would do it like this:

.grid-container {
  display: grid;
  min-height: 100vh;/* add this*/
  grid-gap: 10px;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;/* the key */
}

Also use min-height in your header and footer and not height as that is very fragile in a responsive layout.

3 Likes
4

Assuming you aren’t going to change the structure of the grid container I would do it like this:

Thank you. By structure, do you mean the row numbers? I assume I can expand the main section to two columns later, but the header and footer will remain the same.

5

Yes, keep it to three rows e.g header, main, footer. You can add anything you like inside those. :slight_smile: