0

The most annoying bit I run into whenever I make a web-page from scratch is getting the footer to stay at the bottom properly. The web is plagued with pages where the footer sits awkwardly in the middle on high definition screens.

Popular questions that talk about this:

My issue with the (valid) answers given to those questions is that they're relying on knowing beforehand the size of your footer, something that makes the website less responsive.

Is there any way to have the footer fixed at the bottom of the page that works on any screen and doesn't rely on predefined constants?

In the app I'm working on, I made use of @media to separate how it looks on mobile and desktop but discovered that 100vh is not always the full view port on mobile (discussion here). After some fiddling, I got this to work (as far as my Google Chrome developer console is concerned).

(Header and Footer are react components)

<Header/>
<div className="content">
  <p>Content</p>
<div>
<Footer/>

.content {
    @media screen and (max-width: 738px) {
        min-height: calc(100vh - #{$footer-height-mobile} - 1.92 * #{$navbar-height});
    }
    @media screen and (min-width: 738px) {
        min-height: calc(100vh - #{$footer-height-desktop} - #{$navbar-height});
    }

}

The 1.92 was the only value that gave me the expected behaviour. Any less and it overflows, any more and it leaves empty space at the bottom. Is this an actual solution, or is it just a thing that happened to work in Google Chrome?

Mike
  • 627
  • 1
  • 7
  • 21
  • 1
    I think there might be a solution in this article: https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3. I had your issue before, it can be fixed via flexbox. – Vanch Jan 29 '20 at 15:14
  • @ChristopheVanassche flexbox seems like the elegant solution but for some reason it doesnt work on my app – Mike Jan 29 '20 at 15:42
  • 1
    @ChristopheVanassche I was not looking at the correct parent element. Flexbox is the way to go! If you add a nice answer I will accept it. – Mike Jan 29 '20 at 15:49
  • Glad I could be of help! – Vanch Jan 31 '20 at 07:26
  • You would do me a favor by accepting my answer as the solution for your problem if I was of any help. ;-) @Mike – Vanch Feb 11 '20 at 13:03
  • @Vanch, yes, I forgot. I want to improve it a little bit but it will be accepted by the end of the day – Mike Feb 11 '20 at 14:11

1 Answers1

1

You can get the footer to behave like you mentioned by using flexbox. Here you can find a css-tricks article that talks about it.

I've had this issue before, and flexbox is a really good solution. There is a bug on IE11 though, where the distance between the content & footer is calculated wrongly when using an oversized image. But I think that's neglectable.

Mike
  • 627
  • 1
  • 7
  • 21
Vanch
  • 296
  • 1
  • 13