If you ONLY KNEW how many friggin' hours I've spent searching for help on this exact same thing.... Dear God. My eye holes hurt!!! I told my husband I was ready to throw myself off a bridge!! Thank you SO much. I'm keeping up with you.
@@KevinPowell well, I fixed one thing, and it jacked up another. I'm so confused :( I wish I were more fluent. I quit my job to go back to school and I'll be 50 in December. I feel like my patience is diminishing. I thought I fixed the footer. It left a space in my header 😫 can you see this? www.sitesbydesign.altervista.com/cleo
It was really that simple, huh... I seriously spent DAYS trying to figure out some complicated solution LOL thank you so much! I'm new to the web dev world and am taking a crack at making my own blog
OMG finally. I could not figure out why I would copy and paste the code from my other pages that had the background color go all the way to the bottom but that one shorter page had a white banner on the bottom no matter what I did. I was going out of my mind. Thank you for this fix!
I've spent hours trying to fix it using every method possible and none of the worked, but you manage to make my problem solved with basically 4 lines of CSS, thank you very much!!
When working with WordPress, there will be some invisible elements in the tag. A grid would give each element a row, but flexbox will not. So, it's better to use display: flex
I spent way too much time trying to figure this out. Gave up on the last project trying to achieve this, there are so many "solutions" out there and none of them work. But this one worked flawlessly. Thanks!
Great video Kevin, keep up the great work. My method is to: 1. set body min-height to 100vh 2. set footer wrapper to position sticky and top to 100% I will need to test this more on mobile to see if the issue you mentioned exists and tweak it accordingly.
Thank you so much Kevin, you are the man!!!! I am currently doing your Responsive Website Layout on Scrimba and couldn't figure out how to get the footer to stick to the bottom. Tried for about half and hour just to get that thing down there. There were so many complicated "fixes" to this I tried but none really worked. But your solution worked like a charm!!!! You are very inspiring and I hope to be half as good as you one day.
Instead of margin: auto (maybe you want specific margin-top on the footer in case of longer pages), you could use justify-self: flex-end on the footer, and flex-grow: 1 on the main content (above the footer, to fill up the space, otherwise flex-end won't work). And probably justify-items: flex-start on the body so the content will not be centered vertically, if it is short.
or you can do this too: body { display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; } But overall, the Grid-methodology is still the best, because the footer is one hell of a very large sections of a page, it's the best to use Grid to put it in its region where it was supposed to be, the Grid is like having all its component situated already in their own region by using the grid lines. That's what I've tested...
Excellent video. FYI - if you are using Angular, you apply everything explained here, not to the body, but rather to app-root (or whatever your root component is)
Or if you use Next.js, its the nested div insitde body with "#__next". Or create a layout wrapper for the header, main, & footer & wrap that whole thing in a div & style that div in you don't want to style the "#__next" div.
I remember struggling to get sticky footers to work back in 2012-ish, and it's really amazing how much easier it is now! Even four years ago when this video came out!
Some really good notes here! One thing I'd suggest which is what I do with mine (assuming header/main/footer, but can be adjusted) is on the body tag I simply put body{display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto;} and that does the trick just fine with only 3 lines of code. 😀
You can change the layout simply by updating the grid-template-rows value or using grid-template-areas as well. I always design with header main footer anyway and any content can be placed in the main tags
Thanks a lot sir , It solved my problem with no issues. I went through a bunch of sites but none of them were helpful , If It wasn't for you , my footer would've been a mess 😅😅😅 Thanks again 👍👍👍...
to be honest, I really hate CSS 😒, I'd rather do javascript than CSS. but after I saw this video, I am no longer afraid of CSS 😂😂 your explanation is very easy for me to understand. great vide sir 👍 thanks 😊
great video kev! i was struggling a lot to do this, mostly because my searches lead to users posting about fixing the footer, which is not easy on the eye. only problem i had was when content or cards had to load, it ends up as in 0:56
Awesome video! Thank you! I think this will work too, You can set the body min-height to 100vh then subtract the height of the footer body { min-height: calc (100vh - 80px);} 80px is the height of the footer
That would work too! but I don't like setting heights on things though. What if you need to change the height of the footer later (extra line of content maybe)? Then you also need to go and change the height in your calc().
with grid it is one line of code + on body 100dvh not 100vh, and grid: 1fr auto / auto = 1fr for body container row and auto for footer row / auto column width
Other two methods I just figured out trying was a not so good method I would say, through giving position absolute to the footer and "bottom: 0;". Another way is giving the body the 100vh height or the alternatives the video gave and justify-content: space-between.
05:50 "if you know another way" An obvious 200 IQ way Or you can let your cat to sit on a keyboard. Then change the masterpiece text' color to background color.
