Responsive CSS Sticky Footer
Playing
01. Responsive CSS Sticky Footer

Episodes

0%
Your progress
  • Total: 4m
  • Played: 0m
  • Remaining: 4m
Join or sign in to track your progress

Transcript

00:00
In this video, we're going to look at a trick to achieve a responsive sticky footer, which
00:05
is usually quite difficult. So here you can see I've got some content just in my body of my page, on my wrapper. And I've got some content in the footer as well.
00:16
So as I pull this in, you can see that not only does the footer fall down with the content, it also does respond nicely. So it's obviously not a fixed height footer.
00:27
So this is extremely easy to do. So let's go ahead and look at how we do this. So we'll go ahead and write the markup first. You can see I've got a basic document laid out here.
00:37
And I've got a main.css stylesheet linked in, with nothing in it at the moment. So the first thing we want to focus on is the wrapper. So this is just where all of your content will go.
00:48
If you're incorporating this into your website as it is, you may need to change things around here. But this is generally how things are going to work. So I'm going to say this is the content.
00:58
And we'll also have a footer down here. This doesn't need to be a HTML5 footer element. It can be whatever you want. And inside of here as well, we'll create a wrapper.
01:09
The reason we're going to do this is we need to add some padding to this. We won't be able to add padding to the footer. We'll see why in a moment.
01:17
So I'm just going to say this is a footer. OK, so what we're going to do now is over in main.css, we're going to apply some styles to the HTML and the body. And the first thing I'm going to do
01:28
is set the margins to zero, just so everything sort of sits back in its place like this. And we also want to do a few hacky things. And this is a very hacky solution, but it works.
01:41
So I'm going to set the display type of HTML and body as a table. I'm going to set the height to 100%. And I'm going to set the width to 100% as well.
01:53
Now let's fill in our wrapper styles. And let's also fill in some footer styles. In the footer specifically, I'm just going to change the background color to slate gray.
02:05
And for the wrapper, I'm going to give that the 20 pixels padding I spoke about a moment ago. So that now gives us this. So we can start to work on pulling this footer down
02:14
to actually make it sticky. So with the wrapper, we want the height to be auto here. And this isn't going to do much. But in a minute, what we're going to do
02:26
is we're going to change the actual footer to be a table row. And this is part of the hack, really. We're working with tables here.
02:34
Although it does seem odd, we are technically using CSS properties. We're not actually marking up tables here. So personally, I don't see a problem with this solution.
02:44
So we're going to set the display type of the footer to a table row. And I'm going to set the height here to one pixel. So now what we're going to see is
02:54
we're going to see this literally just stick to the bottom. And the benefit to this is that, obviously, as we add more markup here, this is going to be responsive.
03:04
Say, for example, we were to add a couple of lorem ipsum paragraphs just here, and we were to do the same in the footer, maybe just a few this time. Then we can head over here.
03:22
And the first thing that we notice is that all of our content in our main wrapper, or main section, whatever, however you're going to mark this out, will push down
03:31
the footer, which is what we expect. We don't want it to overlap or anything like that. And second of all, you'll see that the height of the footer has increased.
03:39
And in actual fact, when we pull this in, the height increases even more to take into account the height pushing from the content. So that's pretty much it.
03:49
It's really easy to do and quite clean. No sort of extra markup required. Like you see, sometimes we get a push class or a push ID being added in our markup somewhere.
04:02
This just allows you to keep your markup to an absolute minimum. So that's how we create a responsive sticky footer with CSS.

Episode summary

In this episode, we tackle a common web design challenge: making a responsive sticky footer that actually works well across different screen sizes and with variable content amounts. You’ll see why this problem is trickier than it seems, because the footer should always stick to the bottom when there’s not much content, but get pushed down naturally when the page is long.

We step through a clever CSS “hack” solution using table display properties—so no actual HTML tables involved! First, we set up basic HTML structure with a wrapper for content and a footer area. As we work in CSS, you’ll see how setting display: table on the html and body, and then using display: table-row for the footer, gets things working reliably. We'll also talk about why we need some extra wrappers or padding to keep things looking nice.

After adding some styles (and a little color to the footer), we experiment by throwing in more content. You’ll see that the sticky footer works as expected—the footer moves down when you add content but stays at the bottom on shorter pages. Best of all, this trick doesn't require any strange “push” classes or extra empty elements, so the markup stays clean and simple.

By the end, you’ll know a solid, straightforward way to make your footers behave, and your layouts will be a bit more robust!

Episode discussion

No comments, yet. Be the first!