Fixed Footer? Dynamic Height? Don’t look down (React or Flex)

Wellington Grisa
Aug 23, 2017 · 3 min read

Hey, ho!

For those eager for solutions

In a nutshell (or in code excerpts):

For those who likes some story

So you received this task:

As an user I want to see a beautiful footer in my site.

It seems pretty straightforward, so your brain claims:

body {
padding-bottom: 45px; // to balance with the height of the footer
}
.footer {
position: absolute;
height: 40px;
bottom: 0;
}

And voilà! You can go home once you have a perfect footer on the ground (ba dum tss!:P )

As an example below, you can see that as many paragraphs as you add, it will always show the whole content (including the last paragraph).

However, you keep reading and the task defies you: This footer will show random Shakespeare’s quotes. As everyone knows, some could enter a tweet post and some certainly not. At this point your brain already guessed correctly, this height will need to be dynamic.

An issue which can appear is shown in the code below. There’s a new button to change the footer’s content. Also, the height of the footer in css needs to be changed to auto, as it needs to cope with different quotes heights.

Note that, depending on how much Shakespeare was inspired, you cannot see the last paragraph if it reaches the footers.

Here’s the challenge, once this footer will be dynamic you will have to worry about the content’s padding-bottom to keep a visible content. As you might be selling the content’s space for some thousands of hundreds of dollars, you want to show it.

No more chit-chat, I’m going to show two different solutions:

  • the classic position fixed and bottom zero footer
  • using the new (not so new anymore) flex solution

Position Fixed

To handle that you will have to use React refs in order to have that extra padding in your component. As they say:

The code is worth a thousand words..

Well, they don’t say that, but probably developers think of it.

Using Flex

Again as everyone says…

The code is worth…

However, a bit of explanation over here, I created a mixin (contentWithStickSurroundings) in scss to handle the flex content in the middle and footer in the… footer :D

Basically what it does is create a flex container where anything which is not the given class (content in our case) will have a flex: 0 0 auto which together with the other styles on the mixin makes the magic.

This way of setting things as flex: 0 0 auto; gives us some space to be even more creative, and have a fixed header… toolbar… again, anything which isn’t our given mixin class argument, will behave as a fixed element. In the case below, we added a new header with Aristotele’s quotes, because quotes are never enough.

Happy fixing footers.

References:

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade