Search code examples
csscss-gridfooter

How can I force footer on bottom of page on empty/full page with grid layout

I have a few pages with not a lot of content. The whole website is styled with a grid layout - basic header, main and footer:

basic grid layout

The goal is to set the footer onto the bottom of the screen with a whitespace from the content, if there isn't a lot going on on the page like this:

for demonstration purposes I used margin-bottom of 50vh on this page

For demonstration purposes I used margin-bottom of 50vh on this page.

But if, for example a blog post is bigger than 100vh, the footer should still appear on the bottom - without the whitespace of course:

user needs to scroll to see the footer on the bottom of the page

The user needs to scroll to see the footer on the bottom of the page.

What's a "best practise"-way of achieving this behaviour (preferred without JS(?))?

Some code for those who might want to have a look into the structure of the webpage:

/* inside this class the content is wrapped into the grid layout */
.container {
  display: grid;

  grid-template-areas:
  "header header header header header"
  ". recent-posts recent-posts recent-posts ."
  "footer footer footer footer footer";

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 10px;
}

/* setting header, main and footer as grid layout */
header {
  grid-area: header;

  border-bottom: 1px solid;
  border-radius: 4px;
  margin-bottom: 2vh;

}

main {
  grid-area: recent-posts;
}

footer {
  grid-area: footer;

  margin-top: 1vh;
  padding: 0.2vh;
  border: 1px solid;
  border-radius: 4px;
}

If someone wants to have a look into the whole code, I publish the source code on my GitLab.

Solution

  • I got around with a solution which might help someone else in the future:

    Inside the .container class I added:

    .container {
[…]
/* this forces the footer to stay at the bottom even if the content doesn't fill up the page */
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

    where grid-template-rows equals the amount of rows of the grid layout.

    I edited the CSS-file to remove padding around the whole grid-layout which made the page a tiny bit bigger than 100vh and added a scrollbar this way.

    Instead I added a margin to the header and footer itself:

    footer on low-content pages footer with more content

    On mobile you may need to scroll to see the content due to the URL bar:

    landing on mobile startpage scroll on mobile to see 100vh

    I mark this question as solved as this solution does exactly what I want; still, if someone knows a better way, please write an answer!