Thank's for the tutorial. Since I was using a bootstrap footer all I had to do is this for the css: * { margin: o; padding: o; } html, body { height: 100%; } #container { min-height: 100%; } #main { overflow: auto; } Make sure you are using Id's instead of classes because bootstrap will mess you up!
I came here to learn about keeping the footer at the bottom of a page and got surprised how dumb I was this whole time, just learn about the *{margin:0;padding: 0;} thank you so much, you didnt just help me with the footer but you also helped me in my general coding. TYSM!!! you deserve my like, subscribe and my comment.
duuuuuuude. I just started html and css 2 weeks ago and it"s been killing be why my footer is not at the bottom. I'll make sure to check out your classes. THANK YOU!
cant thank you enough, this helped a lot for the angular application which was loading the footer first all the time. just applied the css on the global css file and referenced the id's in the html.. worked like a charm, thanks buddy!
Hello sir Dani. I'm very thankful for the smooth discussion you share to us about HTML and CSS, I already finish this course and I'm now a great fan of yours. Thanks for being a blessing to us beginners. Keep safe.
the real problem is to implement this with a responsive footer such as in bootstrap, I know it because I spent days trying to fix it, going through so many forums and still no solution. All the better solutions out there require me to specify fixed height for the footer in the CSS, but since the footer is responsive, when I shrink the webpage width the footer content just stacks on top of each other and that changes the height, I still haven't found a solution to this problem so I gave up on this entirely, If you could help me out with this then it'd so helpful!
I was looking for silver but found gold1️⃣🥇. Have seen so many useless tutorials before found this. I just needed to add one more div inside of a div to solve the problem👏
what to do with that footer's fixed height when we get *content* inside of it and squeeze page to smaller screen size ? do we have to set Media for footer hight each time design is broken by lower screen sizes ?
I don't understand what I'm doing wrong. My footer gets pushed to the bottom of my content, but not to the bottom of the page when there isn't enough content to push it. Like its still following normal flow. I put in all the CSS that you did here and put all of my content inside of a Wrapper and Main div. Getting so frustrated here. Thanks for any help you can give.
hey can someone answer me please, so my problem is that, when i put a copyright in a bottom, it;s appear in the bottom of the browser, still ok here, but when i have a large content, and so we can scroll down the browser, the copyright row is still in the same position, when i scrolled down, it doesnt moving, still on its position, so it looks like the copyright blocked part of the content. can anyone help me with this please?
Question: I don't understand why we need to have main div inside another div, why we couldn't just have one main div and then put the footer in padding-bottom of that div? Any clue or explanation on this would be highly appreciated, thank you very much :)
Bro can you help me with something similar to this.. i want to make sure that when an html table exceeeds a certain height, it should break and continue in the next page (page-break). this behaviour is needed for Print to pdf preview... And by this it should ensure that the footer remains intact and doesn't end up overlapping on the table.
For this i need to change every page in my website and to change almost every div i already have, this change will take lots of time - is this the only way to get it done ?
Nice lectures, I have been following your tutorials every step of the way to building my first website. However it didn't turn out at the end the way I wanted it. Could i be doing something wrong?
Hi there, loved your tut, but I've got an issue. wht if my fo0ter changes height or it is dynamic how can I do a padding dependig the dynamic footer hight? could you help please
var footerHeight = jQuery("footer#main-footer").outerHeight(); jQuery("body").css('padding-bottom' , footerHeight); use this and add footer fixed on bottom
Your tutorials are great and everything, but you should of made this a continuation of the webpage that was previously created by you in the past tutorials. This could avoid confusion for some new comers, if they decided to continue styling on the previous stylesheet of the footer. If they ran into any errors when continuing and being able to fix them rather than starting from scratch. Also it would be a complete tutorial from start to finish. Still very good work!
is there a way to keep the footer ALWAYS at the very bottom of a none-scrolling website, like even when you shrink the browser the footer won't move? please tell me it's possible...
Somehow this does not work for me. When I had something small inthe the footer is always higher even though I said bottom 0. Is it ok to just set the height to 100% in main? I have a header banner on top. This is my main and footer: #main { overflow: auto; margin: auto; margin-top: 3em; width: 60%; clear: both; padding-bottom: 6em; } /* ###### Footer ###### */ #footer { display: flex; background-color: #7621d3; height: 6em; margin-top: 6em; bottom: 0; position: relative; padding: 3em; clear: both; }
Thanks very much for this video. I've been searching high and low for this solution. Stack overflow has been filled with answers that did not work for me. This one does. I'm currently using bootstrap 4 alpha 6. I have the container div already so I had to add the "main" div and give it the prescribed CSS and got it working on both Safari and Google Chrome.
Should one put everything in the body into a "main" tag or just the content? I have put buttons on the top of the page and a logo above but I'm not sure where to put the main tag. And now I'm a bit confused because you just created a main id instead of a main tag.
Header is the part of the website which repeats on all pages :) An example if we were to take the header on TH-cams website. It would be the white bar at the top with the logo, the search bar, and the user button on the right. That entire white line essentially.
I have to come back to this and ask you what a section would be like? Would you rather choose instead of more and more inside my "main-container"? My code is so far divided like this (codepen.io/andy4117/pen/BqqKyg) and the footer is somehow not at the bottom >.< : Update: I've found out what was wrong, you can check codepen if you want to :-D logo and buttons
This did not work for me. My problem is that I have trouble implementing this into my current code. When I load the page, the footer is colliding with the main content and looks bad. Any help would be appreciated!
Thank you! My footer was stuck on screen no matter where I was scrolling, the clear: both; command in css is the main fix that helped tremondusly. (along with some of the other code) This really helped as it's been bugging me for a couple of weeks now.
What is difference between this option and setting footers position to "fixed"? In both cases you will have to add padding, sure, but while using "fixed", you won't need to use an extra #container
If you set a fixed footer, then the footer will always stay at the bottom even when you have so much content that you can scroll on your page. With this solution the footer always stays under the content, except for when the content isn't tall enough to reach the bottom of the page.
Can you please explain how to add comments to my static simple website using the plain JavaScript? (or Node or any framework based on ExpressJS)? Any hints and tips were are appreciated :)
great tutorial! one question: as soon as I put inside of the footer the browser comes up with a scrollbar on the right. all the other behaviours are correct. my solution which worked was putting simply overflow to hidden inside of the footer but I am not sure it's a good practice... do you know the reason for the scrollbar to appear? thx!
Hey Dan! First of all, great video! Btw, I tried to implement this for my website. It works if I open it using a browser from my pc. However, if I open it from my phone, the footer is not at the bottom of the page. Can you give a hint of how I can fix this? Thanks a lot!
ya, i check, but i find out that is because the content of the footer overflows since the overflow contents will come after the footer will no more be right at the end.
I have my code inside a php doc, it doesn't want to stay at the bottom, stays at the bottom only on a html file. I have search function and login etc so if I use html, they doesn't function. PLEASE Help! :D
Amazing! but i don't know why i have to scroll down to see my footer when my page is empty! i had to remove this : padding-bottom: 100px; from the main div and i solved the problem.
Not to sound flippant, but that's what the whole tutorial is about. If you want the footer to flow right underneath the main content of your page then enter your footer tags as normal.
Worked, but I still have a scroll bar appear at the side of the page even though there is no content. I was hoping this would fix that as I had achieved the same result using a different method. Anyone have any ideas of links to something that works would be helpful.
Hey dude you're really good thanks for the tutorial hope that you'll help a lot of people from now thanks a lot have a great day! 😇 and hope you'll make another videos about html and css thank you so much!
Hi guys if you want to get the content for example a simple text in the middle of the footer, change the height into padding so that the content will go through the center. ^_^
I didn't understand everything clear, but it is luck of my English, probably. Why need in the beginning * { margin:0px padding:0px}, what it gives? What are doing overflow:auto; ? And why need to give footer id, if you can simple use just footer{bla bla}? Thank you
NEW UPDATED 2023 COURSE AVAILABLE! 🙂
You can find it here: th-cam.com/video/v8jDnBYc0bs/w-d-xo.html&ab_channel=DaniKrossing
Thank's for the tutorial. Since I was using a bootstrap footer all I had to do is this for the css:
* {
margin: o;
padding: o;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
}
#main {
overflow: auto;
}
Make sure you are using Id's instead of classes because bootstrap will mess you up!
Thank you so much! After 5 different tutorials, yours was the one that worked!
I like how he left 30 seconds of nothing at the end so he could get 10mins lol
yes bro me too
u can just leave the video dummy
his videos are really helpful, i wouldnt mind more ads
let the man earn money bruh!! ;)
@@louzynerd129 (you understand he did this to ad more ads)
Thank you so much. This is the one thing I have struggled with for such a very long time.
I came here to learn about keeping the footer at the bottom of a page and got surprised how dumb I was this whole time, just learn about the *{margin:0;padding: 0;} thank you so much, you didnt just help me with the footer but you also helped me in my general coding. TYSM!!! you deserve my like, subscribe and my comment.
duuuuuuude. I just started html and css 2 weeks ago and it"s been killing be why my footer is not at the bottom. I'll make sure to check out your classes. THANK YOU!
Last one weeks in am searching this one thank u lot bro from india…
Many thanks for your lectures. They are highly intuitive and beneficial to what I have been doing
THANK YOU!!! I have been searching for solution to this for long long hours and finally here I have found it! THANK YOU!
your videos are the cleanest tutorials of all
You are a lifesaver, dude! Respect!
I don't get why anyone hasn't designed a function for this. Thanks a lot
cant thank you enough, this helped a lot for the angular application which was loading the footer first all the time. just applied the css on the global css file and referenced the id's in the html.. worked like a charm, thanks buddy!
You, sir, are a lifesaver for us backend folks, who struggle with basic front end tasks.
OMG I've been struggling with this for ages, thank you so much, soo helpful
You are the best, Thank you sooo much, this worked for me in the first 3 minutes!!!
Thanks for showing the part where you actually put text in the footer. Now I have to spend an extra hour watching videos in how to do it.
thank GOD it worked finally... thanks man
Hello sir Dani. I'm very thankful for the smooth discussion you share to us about HTML and CSS,
I already finish this course and I'm now a great fan of yours. Thanks for being a blessing to us beginners. Keep safe.
the real problem is to implement this with a responsive footer such as in bootstrap, I know it because I spent days trying to fix it, going through so many forums and still no solution. All the better solutions out there require me to specify fixed height for the footer in the CSS, but since the footer is responsive, when I shrink the webpage width the footer content just stacks on top of each other and that changes the height, I still haven't found a solution to this problem so I gave up on this entirely, If you could help me out with this then it'd so helpful!
Have you tried using @media to specify different styles for different device sizes?
Vantorea That's would be not flexible for height then. I have found the solution provide by csstricks but internet explorer didn't support yet.
Try using a grid within the footer div like so:
© 2018 Logo LLC
its so easy man, just roll a spliff after hours of trying and smoke it. The problem will be solved.
Do you have the solution, i have the same problem now with bootstrap
I was looking for silver but found gold1️⃣🥇. Have seen so many useless tutorials before found this. I just needed to add one more div inside of a div to solve the problem👏
Thank you so much ' after a long day breaking my skull....
Your channel deserves so much more recognition :D
Thank you very much!!!! the number of tutorials I went through I was even about to give up
Thank you it worked ..I only used the full hight lines with body and html and and min hight with the main..
what to do with that footer's fixed height when we get *content* inside of it and squeeze page to smaller screen size ? do we have to set Media for footer hight each time design is broken by lower screen sizes ?
This tutorial work for my training website. Thank you so much
I don't understand what I'm doing wrong. My footer gets pushed to the bottom of my content, but not to the bottom of the page when there isn't enough content to push it. Like its still following normal flow. I put in all the CSS that you did here and put all of my content inside of a Wrapper and Main div. Getting so frustrated here.
Thanks for any help you can give.
Same here, my footer comes in the bottom of my slider, and not in the bottom of the page.
Try using a grid within the footer div like so:
© 2018 Logo LLC
hey can someone answer me please, so my problem is that, when i put a copyright in a bottom, it;s appear in the bottom of the browser, still ok here, but when i have a large content, and so we can scroll down the browser, the copyright row is still in the same position, when i scrolled down, it doesnt moving, still on its position, so it looks like the copyright blocked part of the content. can anyone help me with this please?
As simple as it can be. No flexbox code, no Javascript, just a light CSS-based solution.
What if a footer needs dynamic height, say on mobile breakpoints? I feel setting a fixed height can cause issues down the line
Really helpful, thanks mate.
damn... how come I can't think of this. thank you man.
Question: I don't understand why we need to have main div inside another div, why we couldn't just have one main div and then put the footer in padding-bottom of that div? Any clue or explanation on this would be highly appreciated, thank you very much :)
Will this work if I skip main and put all content in container and give padding bottom to container
:) Thank you! As promised by the video, the footer stays at the bottom and it is all very well explained!
Thanks . It worked perfect with bootstrap 3 too. No problems.
needed to put my #container on min heigh 100%. thank you
Nice tutorial dude, helped me a lot! Thanks!
Thank you!! 😭😌👍
Bro can you help me with something similar to this.. i want to make sure that when an html table exceeeds a certain height, it should break and continue in the next page (page-break). this behaviour is needed for Print to pdf preview...
And by this it should ensure that the footer remains intact and doesn't end up overlapping on the table.
you are a savior ....... a huge thanks
great video..crisp and clear..
For this i need to change every page in my website and to change almost every div i already have, this change will take lots of time - is this the only way to get it done ?
why do you need clear:both; ?
@@BxlFlorian ??? Me too i don't understand why to need clear:both ?
Clear any element that could float left or right, that will spoil the footer if you don't clear
Can't believe it's still so complicated to make a footer stay down... this should really get built into the footer element...
It is much easier with JavaScript 🙂 HTML and CSS isn’t really designed for this type of logic.
Thanks man, Great video
Is there a way to do this with expanding content for both header & footer at same time?
Nice lectures,
I have been following your tutorials every step of the way to building my first website.
However it didn't turn out at the end the way I wanted it. Could i be doing something wrong?
awesome... very helpful
thanks man love you
Hi there, loved your tut, but I've got an issue. wht if my fo0ter changes height or it is dynamic how can I do a padding dependig the dynamic footer hight? could you help please
you need to do it by jquery
var footerHeight = jQuery("footer#main-footer").outerHeight();
jQuery("body").css('padding-bottom' , footerHeight);
use this and add footer fixed on bottom
yes!!1!11! today i finally finish the html series!!!1!1!
Your tutorials are great and everything, but you should of made this a
continuation of the webpage that was previously created by you in the
past tutorials. This could avoid confusion for some new comers, if they
decided to continue styling on the previous stylesheet of the footer. If
they ran into any errors when continuing and being able to fix them
rather than starting from scratch. Also it would be a complete tutorial
from start to finish. Still very good work!
is there a way to keep the footer ALWAYS at the very bottom of a none-scrolling website, like even when you shrink the browser the footer won't move? please tell me it's possible...
Thanks boss❤
You saved my life! Thank you dude!
Great tutorial, worked lovely!
Thank you!
Thank you very much!
Somehow this does not work for me. When I had something small inthe the footer is always higher even though I said bottom 0.
Is it ok to just set the height to 100% in main? I have a header banner on top.
This is my main and footer:
#main
{
overflow: auto;
margin: auto;
margin-top: 3em;
width: 60%;
clear: both;
padding-bottom: 6em;
}
/* ###### Footer ###### */
#footer {
display: flex;
background-color: #7621d3;
height: 6em;
margin-top: 6em;
bottom: 0;
position: relative;
padding: 3em;
clear: both;
}
It was very nice "Let's put some text, let's say, Blah blah, blah"...🤣🤣🤣🤣🤣🤣
Thanks a lot, as usual your content is very straight forward and without much jibberish. very useful indeed!!!
Thank you...Worked perfectly..!!!
Man, thank you so much for this. It's extremely useful.
Great! It was really helpful! Thank you very much!
Thanks very much for this video. I've been searching high and low for this solution. Stack overflow has been filled with answers that did not work for me. This one does. I'm currently using bootstrap 4 alpha 6. I have the container div already so I had to add the "main" div and give it the prescribed CSS and got it working on both Safari and Google Chrome.
why it does not work with span tag ?
@mmtuts I am trying to do the same but I don't know why my Footer is being placed inside of the container. Could you please help me? Thank you!
Thank you for the tutorial!
thank you, thank you, thank you!
what program is he using?
Should one put everything in the body into a "main" tag or just the content? I have put buttons on the top of the page and a logo above but I'm not sure where to put the main tag. And now I'm a bit confused because you just created a main id instead of a main tag.
I usually do this,
// Header content goes here.
// The main content goes here, including tags for each section in the tag.
// Footer content goes here.
That helps me a lot.
Header is the logo right?
Thanks =)
Header is the part of the website which repeats on all pages :) An example if we were to take the header on TH-cams website. It would be the white bar at the top with the logo, the search bar, and the user button on the right. That entire white line essentially.
I have to come back to this and ask you what a section would be like? Would you rather choose instead of more and more inside my "main-container"?
My code is so far divided like this (codepen.io/andy4117/pen/BqqKyg) and the footer is somehow not at the bottom >.< :
Update: I've found out what was wrong, you can check codepen if you want to :-D
logo and buttons
My footer is still stick just below the navigation bar, despite of getting to the bottom of the page
inspite*
Post it on stack overflow so I can view the code and see if I could help you if you want to.
@@devbros2241 i'll post it today
Thanks man
Nice man, thanks
Why my footer is on the side of my website? I thought it supposed to be on the bottom? Help me plsss
I like how they stall vids to get more time
I like how they like their own comments to make it seem more relevant.
This did not work for me. My problem is that I have trouble implementing this into my current code. When I load the page, the footer is colliding with the main content and looks bad. Any help would be appreciated!
Thank you! My footer was stuck on screen no matter where I was scrolling, the clear: both; command in css is the main fix that helped tremondusly. (along with some of the other code) This really helped as it's been bugging me for a couple of weeks now.
Thank you bro.
What is the difference between different colored text In css
Thank you so much.
use calc height so we do not need to margin in negative
What is difference between this option and setting footers position to "fixed"? In both cases you will have to add padding, sure, but while using "fixed", you won't need to use an extra #container
If you set a fixed footer, then the footer will always stay at the bottom even when you have so much content that you can scroll on your page. With this solution the footer always stays under the content, except for when the content isn't tall enough to reach the bottom of the page.
Can you please explain how to add comments to my static simple website using the plain JavaScript? (or Node or any framework based on ExpressJS)? Any hints and tips were are appreciated :)
great tutorial! one question: as soon as I put inside of the footer the browser comes up with a scrollbar on the right. all the other behaviours are correct. my solution which worked was putting simply overflow to hidden inside of the footer but I am not sure it's a good practice... do you know the reason for the scrollbar to appear? thx!
Hey Dan!
First of all, great video! Btw, I tried to implement this for my website. It works if I open it using a browser from my pc. However, if I open it from my phone, the footer is not at the bottom of the page. Can you give a hint of how I can fix this?
Thanks a lot!
ya, i check, but i find out that is because the content of the footer overflows since the overflow contents will come after the footer will no more be right at the end.
great content.
I have my code inside a php doc, it doesn't want to stay at the bottom, stays at the bottom only on a html file. I have search function and login etc so if I use html, they doesn't function. PLEASE Help! :D
pls make a tut of applying a dropdown on the first webpage you created.. thanks
Great video. Making this type of footer can be a real pain.
Amazing! but i don't know why i have to scroll down to see my footer when my page is empty!
i had to remove this : padding-bottom: 100px; from the main div and i solved the problem.
Not to sound flippant, but that's what the whole tutorial is about. If you want the footer to flow right underneath the main content of your page then enter your footer tags as normal.
Worked, but I still have a scroll bar appear at the side of the page even though there is no content. I was hoping this would fix that as I had achieved the same result using a different method. Anyone have any ideas of links to something that works would be helpful.
Wow. It's so helpful
THANK YOU
Hey dude you're really good thanks for the tutorial hope that you'll help a lot of people from now thanks a lot have a great day! 😇 and hope you'll make another videos about html and css thank you so much!
Hi guys if you want to get the content for example a simple text in the middle of the footer, change the height into padding so that the content will go through the center. ^_^
I didn't understand everything clear, but it is luck of my English, probably. Why need in the beginning * { margin:0px padding:0px}, what it gives? What are doing overflow:auto; ? And why need to give footer id, if you can simple use just footer{bla bla}? Thank you