Easy sticky footer - stop a footer from floating up a short page!
Easy sticky footer - stop a footer from floating up a short page!
Having the footer of the page just floating around in the middle just looks… bad. So let’s see how we can fix it with both flexbox and grid in this video! As an added bonus, both of them are really easy to do!
This CSS-Tricks articles has a few other ways, including different ways to do it with flexbox and grid in case you run into issues with this method - https://css-tricks.com/couple-takes-s…
#css #stickyfooter
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I’ve got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: • How to automatically refresh your bro…
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I’m on some other places on the internet too!
If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell…
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Content
0 -> - Have you ever had a website
0.833 -> you were just really happy with?
2.47 -> It turned out great, you're really happy,
4.24 -> you're going through and
sort of adding a few pages.
6.69 -> You've done the bulk of the work
8.17 -> and you're just adding
the extra pages now.
10.28 -> And then you happen along one page
12.47 -> that just doesn't have a lot of content.
15.32 -> You look at it, and the
footer is floating up there.
20.099 -> It's not where you want it to be.
22.26 -> Looking at it and going, what?
23.97 -> Oh.
25.48 -> It just doesn't look good, right?
28.26 -> Not looking good is an
understatement, looks like crap.
31.69 -> There's a number of
different ways we can fix it.
33.51 -> So in this video, we're gonna be looking
34.52 -> at how we can use Flexbox
and Grid to fix it.
37.427 -> 'Cause Flexbox is sort
of the easy solution,
39.31 -> but I've been putting
display Grid on my body
41.35 -> all the time lately because I find it
43.03 -> really cool and useful.
44.28 -> So we're gonna see how we
can do with Grid as well.
45.79 -> They're really, really
similar solutions, really.
48.417 -> And really, really easy to do.
49.83 -> So let's go and check it out.
51.413 -> (upbeat music)
54.28 -> So here we have our
page that has the footer
56.2 -> that's not stuck to the bottom
57.48 -> and it sucks when that happens.
58.76 -> It just looks really awkward.
60.23 -> So the first step I'm gonna be doing
62.1 -> is using Flex to get that
just stick down at the bottom
64.44 -> because Flex is a little
bit easier to setup.
66.49 -> It's a few less lines of code.
68.08 -> And then we're gonna see how using Grid
69.92 -> we can do the exact same thing.
70.9 -> So if you're already
using Grid on your body,
73.12 -> it's pretty much the same steps
to make sure that it works.
76.55 -> So, right here, we're just gonna come in
78.1 -> and write in display flex just like this.
81.6 -> So I'm gonna hit save on here,
83.01 -> and I'm gonna get my
display Flex but you can see
84.87 -> it's making two columns
because the default
87.01 -> for display Flex is to do,
89.91 -> make everything into columns pretty much.
91.54 -> So, I'm also gonna do a
flex-direction on here
94.47 -> of column which will turn
all my Flex items into rows,
97.66 -> and it stacks back on top of each other.
99.91 -> So, that is all fine and dandy.
102.17 -> But now I need to get
this onto the bottom.
104.52 -> So there are two different ways
that you can set things up.
107.35 -> The first one is here,
just setting a height.
110.06 -> Actually, I'm not gonna set a height,
111.13 -> I'm gonna set a min height of 100vh.
113.7 -> So a minimum height of 100 viewport height
116.48 -> because if not, you're body's matching
118.35 -> the height of the content
119.19 -> and you can't actually push things down.
121.3 -> So setting that means that
my body has to have a height
124.52 -> of at least the viewport height here,
126.66 -> and the easiest thing to do now
128.06 -> is just do a margin-top of auto,
131.9 -> which will push it all the way down.
133.68 -> So when raising Flex, our margin-top
135.83 -> and auto work just like
a margin-left and right
138.21 -> so this is the nice,
really simple way to do it.
141.47 -> Now there are some problems
with setting min heights
144.06 -> to like 100vh if you're on mobile
145.8 -> just because of the way it calculates it
147.92 -> if the bars at the top are not
before you start scrolling.
151.74 -> So if this does present an issue
153.68 -> with and you don't want to be using that
155.04 -> because for mobile reasons,
you could set the height here
157.9 -> to, or we could stick with the
mid-height of 100% instead.
162.53 -> But if I first set that, it stops working.
165.11 -> So if ever, and I'm sure you've seen this
167.34 -> a whole bunch of times where on the html
169.58 -> you also have a height of 100%,
172.52 -> and just like magic, that fixes it
174.3 -> because now the html
element is the full size.
177.96 -> So this height is based
on that height here.
180.6 -> This I've actually run into some issues
182.82 -> with every now and then.
184.14 -> Super, super rare.
185.51 -> But you might want to
use this instead of vh
188.79 -> either for browser support as I said,
190.77 -> just for consistency on mobile.
192.63 -> I think this would give
you a better result
195.07 -> even though you need two lines of code
196.65 -> but it's very rare but sometimes
when you're playing around
200.13 -> with certain things,
this could be an issue.
202.88 -> But again, it's very, very
rare that that happens.
206.03 -> So that's how we can do it with Flex
207.08 -> and just to show you that it will work,
208.54 -> let's come here and add like six
210.59 -> or let's just do 10 paragraphs
with some lorem in there.
215.15 -> And now on a long page,
it's working just fine.
219.93 -> And everything is fine and dandy.
222.04 -> And we'll go back to what we had before.
225.51 -> And on the short page,
226.39 -> my footer is still stuck to the bottom.
228.74 -> So that is really, really cool,
230.38 -> and just to show, let's
say I do another div here,
233.04 -> div with p*10
237.24 -> with lorem in it again.
241.3 -> You know even, I don't
have any padding on that,
243.27 -> but it's still breaking it even
though I have multiple divs
245.95 -> or different things inside of the parent.
249.2 -> So, really, really cool, handy.
251.75 -> A nice way, I think, to work.
253.58 -> And with that working,
I'm gonna skip ahead
255.21 -> a little bit here just to setup the Grid
256.87 -> so we don't waste time setting things up.
258.42 -> But you'll see a really, really simple one
259.98 -> that I'm gonna do and we'll
just see how we can use this
262.52 -> to work with our Grid setup as well.
265.67 -> So here we have my Grid setup
and I put my Grid Inspector
268.71 -> here on so we can actually
see that I am using Grid.
271.16 -> I've setup a really simple Grid here.
273.12 -> So it is using auto for my rows.
276.63 -> And I just have a really,
really simple Grid.
279.24 -> I've lined up my content on that Grid.
281.74 -> I've put my footer on there.
283.8 -> Just again everything else is the same.
286.22 -> I have my min height of 100%.
288.76 -> I have my height on here so
it is matching like that.
291.94 -> And everything is working.
293.79 -> You can see, now, the one
issue that can come up is this.
297.08 -> Where my footer is bigger
than I really need it to be.
300.58 -> But the margin-top auto here
302.48 -> is once again fixing that issue.
303.96 -> It's stopping it from stretching
305.12 -> and filling up that whole space.
307.07 -> So we are sort of saving
ourselves like that.
310.46 -> Now, and once again, I'm just
gonna take this whole thing
313.89 -> and paste it so we sort of
double up on our content
316.9 -> and make the page longer.
318.33 -> And you can see it is
still working just fine,
321.12 -> and everything Is lining
up just like it needs to.
323.84 -> So really, really cool and
handy to get our sticky footer
328.26 -> with this margin-top auto,
even with Grid or Flex.
331.38 -> As I said, if you want to
have Grid setup on your page
335.25 -> you can, we can now do that.
336.7 -> So it's fantastic.
337.9 -> Either way, it should work out fine.
340.15 -> So, I hope you learn
something along the way there.
342.41 -> This is just one of those things
343.49 -> that's nice to know how to do
345.11 -> because it's definitely,
you'll run into it
347.12 -> at one point or another for sure,
348.41 -> if you haven't already
like 10 different times.
350.93 -> If you have another way to fix it,
352.27 -> please leave a comment down
below and let me know about it.
354.77 -> I am, there is a link in the description
356.56 -> that does have a few other
solutions to it as well.
359.86 -> If for one reason or another
361.26 -> you just can't use Flexbox or Grid
364.04 -> in the website you're building.
365.43 -> There are other ways of doing
it that are a little bit
367.27 -> more convoluted a bit because
you have to sort of hackish
370.92 -> to get it to work.
372.09 -> So these are I think the best ways.
374.337 -> And with Flexbox, I don't see
why, you should be able to.
377.61 -> But if you can't, I know
it is the reality sometimes
380.26 -> that we can't so there are
other ways of doing that.
382.78 -> So check out the CSS tricks article below
385.33 -> on how you can do other
methods of getting it done.
389.04 -> Thank you very much for watching.
390.28 -> That's it this week.
391.113 -> If you watched all this and
you haven't yet subscribed
392.6 -> to my channel, please consider subscribing
394.56 -> at weekly tips, tricks and tutorials
396.08 -> just like this one weekly,
398.68 -> every, so that means every single week,
400.22 -> I will have a video.
401.86 -> Sometimes you get two, not too often.
403.33 -> I may try and get back
up to that, we'll see.
406.27 -> But at least once a week there is a video.
408.87 -> A massive thank you to my patrons
410.13 -> for helping support everything
I do here on this channel.
412.65 -> Thank you very much guys,
413.53 -> and a big special shoutout to
Lauren Fernando and Jonathon
417.01 -> for being my supporters of Awesome.
418.5 -> You guys are amazing, thank you
419.83 -> for your very, very generous support.
421.9 -> I look forward to seeing you next week
423.04 -> but until then, don't forget to make
424.31 -> your corner of the internet
just a little bit more awesome.
Source: https://www.youtube.com/watch?v=yc2olxLgKLk