Fixed Footer? Dynamic Height? Don’t look down (React or Flex)
Hey, ho!
For those eager for solutions
In a nutshell (or in code excerpts):
- simplest case: fixed footer with fixed height showing all content
- likely issue using fixed footer with dynamic footer height
- solution with fixed footer using React refs
- solution using flex container
- bonus: using flex container adding a header to show the benefits of it
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:
