Body extends below footer
Does anyone know why the body extends below my footer on smaller screens ? and there's no fix height so I don't understand what's going on..
https://codepen.io/Antony-Collin/pen/WNYejKZ
45 Replies
Old vid but this should help https://youtu.be/yc2olxLgKLk
Kevin Powell
YouTube
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 wit...
thanks, will check it out
Html is quite devious that way. Your background may extend all the way down, but the actual div or whatever doesn't
does the video explain how to stop my body at my current footer position or how to stick my footer all the way down my current body ? because I would rather the first option, idk if it's possible tho
What do you mean with "stop the body at your footer position"?
I would like my full page to be this long instead of just adjusting my footer down
Well, the browser is gonna be as tall as the user wants
You cant resize the window. That goes against everything web design is about
You could have your content centered at the page
I'm not sure I understand, I thought the height of the page is as long as it needs to be to fit the content
And then the footer at the bottom.
That would make best use of the screen space
Yeah. I don't understand what your goal is
If the window is taller than your page, it'll just end halfway through
got you ! I got confused I guess. I will check the video for cases where the window becomes taller
For this page i'd recommend moving the footer down and then centering your content vertically
I've made home pages like this before. Works pretty well
can I just use vertical align to center the content ?
No, that property only applies to text. It doesnt do what you think it does
I'd use flex-grow on the middle div to have it fill the vertical space and then use another flex or grid container tk center your content in there
Making a codepen one sec
I fixed the footer now I just need to center the content
is codepen down?
ok ok
it works for me
I don't know what I did wrong but it doesn't seem to fix https://codepen.io/Antony-Collin/pen/WNYejKZ
oh you added margin-top: auto to the footer
i prefer using flex-grow for this because then the main content always fills the page
so flex-grow: 1 for the footer ?
Or actually i've been using grid lately
Wait i'll make a codepen
thanks for your time, I appreciate it
This should help https://codepen.io/stefanh-at/pen/OJaJpPw
it kinda works but displays my flexbox vertically
Can you update your codepen?
Also probably good to only have a single div in
main. just wrap both your divs in an empty divAlso that should be a heading tag of some sort
Doesn't look any different to me?
I want my flexbox to display it like this but centered, I don't want the items to be vertical
I can't see the changed version on codepen. Still using the old methods for me
Yes
Issue is you accidentally changed your
.games to have display: grid lol
That should be flex. Guessing that's a mistakeyou are right, but if I'm not mistaken, .games doesn't seem to be centered
is it ? idk
No. It doesn't seem like you implemented my suggestions in the codepen
you're still using the giant footer margin here
this is the stuff you need to replicate
look at my example code and apply it to yours
I tried and it's not working
I wouldn't use vh units here. You can apply height: 100% to html tag and min-height: 100% to body tag
Really it shouldn't make a difference in this case I don't think but imo it's better to just completely avoid vh/vw units when you can
vh is perfect for this. note that it's a min-height, not a height
i used to set min-height 100% on html and body too but this is faster and i can't see any negative side effects
viewport units are often discouraged because people use them for dynamic font sizes, but even then, they're fine as long as you clamp them
Yea I agree with you, but I think if someone is new to css it's better to avoid viewport units because it's an easy trap to fall into, since there's a lot of nuances that someone who is new might not know
Just my 2 cents