CODEWITHSUNDEEP
csscss-gridfooter
user14854027
user14854027

Reputation:

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.

Upvotes: 1

Views: 1551

Answers (2)

user14854027
user14854027

Reputation:

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!

Upvotes: 1

Abin Thaha
Abin Thaha

Reputation: 4643

So this will be how if we use flexbox in this case.

section will act as a container to the whole data except the header and footer. Since the section is defined as flex:1, it will take the entire space except for the header and footer.

In this way, if the content gets overflowed in section, the footer will be pusher further down too. You don't have to worry about any such scenarios.

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header, section, footer {
  border: 1px solid #ddd;
  padding: 10px;
}

section {
  flex: 1;
}
<main>
    <header>
        Something
    </header>
    <section class="container">Another thing</section>
    <footer>
        Footer
    </footer>
</main>

Upvotes: 0

Related Questions