How to Always Keep the Footer at the Bottom of A Page | Learn HTML and CSS | HTML Tutorial
ฝัง
- เผยแพร่เมื่อ 5 เม.ย. 2017
- How to Always Keep the Footer at the Bottom of A Page | Learn HTML and CSS | HTML Tutorial. In this lesson we will learn how to keep the footer at the bottom of our page. Meaning that we don't want the footer to go above the height of our browser, when we don't have a lot of content on our pages.
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Material for this lesson: / lesson-material-42361704
NEW UPDATED 2023 COURSE AVAILABLE! 🙂
You can find it here: th-cam.com/video/v8jDnBYc0bs/w-d-xo.html&ab_channel=DaniKrossing
Thank you so much! After 5 different tutorials, yours was the one that worked!
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!!! I have been searching for solution to this for long long hours and finally here I have found it! 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!
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!
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)
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 ?
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.
Thank you very much!!!! the number of tutorials I went through I was even about to give up
Thank you so much. This is the one thing I have struggled with for such a very long time.
Nice tutorial dude, helped me a lot! Thanks!
OMG I've been struggling with this for ages, thank you so much, soo helpful
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!
:) Thank you! As promised by the video, the footer stays at the bottom and it is all very well explained!
Thanks a lot, as usual your content is very straight forward and without much jibberish. very useful indeed!!!
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?
Man, thank you so much for this. It's extremely useful.
You, sir, are a lifesaver for us backend folks, who struggle with basic front end tasks.
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 :)
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!
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
You saved my life! Thank you dude!
your videos are the cleanest tutorials of all
This tutorial work for my training website. Thank you so 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;
}
Will this work if I skip main and put all content in container and give padding bottom to container
Thanks . It worked perfect with bootstrap 3 too. No problems.
Is there a way to do this with expanding content for both header & footer at same time?
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.
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.
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.
Your channel deserves so much more recognition :D
Thank you so much ' after a long day breaking my skull....
You are the best, Thank you sooo much, this worked for me in the first 3 minutes!!!
Great! It was really helpful! Thank you very much!
You are a lifesaver, dude! Respect!
Thank you...Worked perfectly..!!!
Thank you it worked ..I only used the full hight lines with body and html and and min hight with the main..
thank GOD it worked finally... thanks man
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!
I don't get why anyone hasn't designed a function for this. Thanks a lot
@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!
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 :)
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
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.
Great tutorial, worked lovely!
Thank you for the tutorial!
you are a savior ....... a huge thanks
pls make a tut of applying a dropdown on the first webpage you created.. thanks
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 ?
damn... how come I can't think of this. thank you man.
Thank you so much!!!
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
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?
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.
Really helpful, thanks mate.
Last one weeks in am searching this one thank u lot bro from india…
great video..crisp and clear..
yes!!1!11! today i finally finish the html series!!!1!1!
thanks man love you
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👏
Why my footer is on the side of my website? I thought it supposed to be on the bottom? Help me plsss
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
Thank you!
Wow. It's so helpful
thank you, thank you, thank you!
Thank you so much.
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...
Great video. Making this type of footer can be a real pain.
Thanks man, Great video
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.
awesome... very helpful
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!
Thank you very much!
needed to put my #container on min heigh 100%. thank you
Thanks man
Thanks boss❤
THANK YOU
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
what program is he using?
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.
Thank you bro.
Nice man, thanks
why it does not work with span tag ?
What happens if you don't style everything with selector *. will it still work?
Yes but you might have some annoying default margins or paddings. Instead of * you could also use a reset stylesheet.
Thank you!! 😭😌👍
thanks!!
What is the difference between different colored text In css
life saver :)
thnx a alot
very helpful
Thanks
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
Shout out to you!
i need help with my website could you pls help
thanks
great content.
has Anyone tried monad plug for push monétization? they have much better foyouts than other networks i've tried and top notch suport
What does "clear: both" do?
It stops any existing floats there might be on the element.