How to Always Keep the Footer at the Bottom of A Page | Learn HTML and CSS | HTML Tutorial

Подписаться 472 тыс.

Просмотров 319 тыс.

50% 1

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

Опубликовано:

5 апр 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 193

@Dani_Krossing Год назад

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-v8jDnBYc0bs.html&ab_channel=DaniKrossing

@devbros2241 4 года назад

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!

@oilluttt 6 лет назад

Thank you so much! After 5 different tutorials, yours was the one that worked!

@jozsefsido9764 5 лет назад

THANK YOU!!! I have been searching for solution to this for long long hours and finally here I have found it! THANK YOU!

@tatesuh3651 3 года назад

I like how he left 30 seconds of nothing at the end so he could get 10mins lol

@yassinemessai1 3 года назад

yes bro me too

@louzynerd129 3 года назад

u can just leave the video dummy

@7us 3 года назад

his videos are really helpful, i wouldnt mind more ads

@himanshushukla787 3 года назад

let the man earn money bruh!! ;)

@modcolocko 3 года назад

@@louzynerd129 (you understand he did this to ad more ads)

@riaish4835 2 года назад

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!

@eandrea4747 2 года назад

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!

@klynesenyahan644 2 года назад

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.

@assassincreed7806 Год назад

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.

@louman4322 11 месяцев назад

Thank you so much. This is the one thing I have struggled with for such a very long time.

@mlensment 4 года назад

You, sir, are a lifesaver for us backend folks, who struggle with basic front end tasks.

@chikomutandwa325 4 года назад

Thank you very much!!!! the number of tutorials I went through I was even about to give up

@willianferreira2118 6 лет назад

Nice tutorial dude, helped me a lot! Thanks!

@ladyd4430 3 года назад

OMG I've been struggling with this for ages, thank you so much, soo helpful

@mangouni 6 лет назад

:) Thank you! As promised by the video, the footer stays at the bottom and it is all very well explained!

@suckilyify 4 года назад

Thank you so much ' after a long day breaking my skull....

@XJerome124 5 лет назад

Thanks a lot, as usual your content is very straight forward and without much jibberish. very useful indeed!!!

@alisonjimmy2023 6 лет назад

Your channel deserves so much more recognition :D

@sonoGolaSS 4 года назад

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!

@waronamogobye436 3 года назад

I don't get why anyone hasn't designed a function for this. Thanks a lot

@arturoguillen 4 года назад

Man, thank you so much for this. It's extremely useful.

@junjiechen7341 7 лет назад

You saved my life! Thank you dude!

@IsItTimeToTravel 5 лет назад

Thanks . It worked perfect with bootstrap 3 too. No problems.

@neilcuarteron1574 4 года назад

your videos are the cleanest tutorials of all

@lukmanbudiman8085 4 года назад

This tutorial work for my training website. Thank you so much

@pythusiast4701 3 года назад

thank GOD it worked finally... thanks man

@raniaayad4285 3 года назад

Thank you it worked ..I only used the full hight lines with body and html and and min hight with the main..

@Eww...NotTheHumansAgain 3 года назад

You are a lifesaver, dude! Respect!

@suleimanhajj1064 3 года назад

You are the best, Thank you sooo much, this worked for me in the first 3 minutes!!!

@shobhitsylvester7330 5 лет назад

Thank you...Worked perfectly..!!!

@ukvaishnav 6 лет назад

you are a savior ....... a huge thanks

@FictionsAndIllusions 6 лет назад

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.

@vigi1antvort3x41 Год назад

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.

@kamandsaadati2530 5 лет назад

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 :)

@gurulovearthi 3 года назад

Last one weeks in am searching this one thank u lot bro from india…

@zakhariihusar6975 2 года назад

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👏

@mitrasu5918 4 года назад

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 ?

@mario__1981 5 лет назад

Great! It was really helpful! Thank you very much!

@calibr0636 5 лет назад

yes!!1!11! today i finally finish the html series!!!1!1!

@habbobites3350 4 года назад

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!

@MaZaKeRaL 7 лет назад

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!

@Piri8 4 года назад

Great tutorial, worked lovely!

@martins9966 2 года назад

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?

@Kayne1b 4 года назад

Thank you for the tutorial!

@webdev4786 3 года назад

damn... how come I can't think of this. thank you man.

@AkshayKumarX 7 лет назад

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!

@Vantorea 6 лет назад

Have you tried using @media to specify different styles for different device sizes?

@Rip_pirel 5 лет назад

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.

@lilvc3469 5 лет назад

@justaprogrammer3764 5 лет назад

its so easy man, just roll a spliff after hours of trying and smoke it. The problem will be solved.

@siyaryamin4904 2 года назад

Do you have the solution, i have the same problem now with bootstrap

@sumayyakp8688 4 года назад

great video..crisp and clear..

@nhan1503 5 лет назад

Thank you so much!!!

@wesleyotero8564 6 лет назад

Great video. Making this type of footer can be a real pain.

@indermatharoo6095 3 года назад

Really helpful, thanks mate.

@malikumairmukhtar 6 лет назад

Wow. It's so helpful

@chrisoconnor6313 4 года назад

Thanks man, Great video

@pythusiast4701 3 года назад

awesome... very helpful

@small0911SHE 4 года назад

Thank you so much.

@ricardoacosta7605 4 года назад

thank you, thank you, thank you!

@marcobarbosainvestimentos 4 года назад

Thank you very much!

@amniar8158 Год назад

thanks man love you

@hopemoloto3299 2 года назад

needed to put my #container on min heigh 100%. thank you

@Jeremiahking101 Год назад

Thank you!

@MyNegativeCreep 4 года назад

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; }

@jos3008 5 лет назад

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?

@businesshints 4 года назад

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 :)

@moisesvalles7502 4 года назад

Nice man, thanks

@angke5677 6 лет назад

pls make a tut of applying a dropdown on the first webpage you created.. thanks

@inspirationalquotes5840 4 года назад

Thank you bro.

@FighterzNudeMods 3 года назад

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.

@ammar9279 3 года назад

Thank you!! 😭😌👍

@neto9217 6 лет назад

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!

@heavygruff 6 лет назад

THANK YOU

@neb542 2 года назад

Is there a way to do this with expanding content for both header & footer at same time?

@zahinhasan282 2 года назад

Thanks man

@diversecontent788 4 года назад

Will this work if I skip main and put all content in container and give padding bottom to container

@thawngzakung5047 6 лет назад

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

@Conker10382 6 лет назад

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.

@paulvos7146 5 лет назад

Same here, my footer comes in the bottom of my slider, and not in the bottom of the page.

@lilvc3469 5 лет назад

@jondyason336 5 лет назад

thanks!!

@nandinihanda3996 2 года назад

very helpful

@umershahid 4 года назад

@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!

@Zittoxic 5 лет назад

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

@VijaySingh-op4hu 4 года назад

you need to do it by jquery

@VijaySingh-op4hu 4 года назад

var footerHeight = jQuery("footer#main-footer").outerHeight(); jQuery("body").css('padding-bottom' , footerHeight); use this and add footer fixed on bottom

@davehee6 6 лет назад

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.

@krazyteetp5803 5 лет назад

Shout out to you!

@codewithar9140 4 года назад

great content.

@the_pheonix1 7 лет назад

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

@Dani_Krossing 7 лет назад

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.

@dexteranthonyremegio2481 Год назад

Thanks

@anjumkhan1775 6 лет назад

thnx a alot

@kendeanon3171 4 года назад

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. ^_^

@seranastorey3003 2 года назад

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.

@joelrinos4608 5 лет назад

life saver :)

@mathewi2761 6 лет назад

why do you need clear:both; ?

@mikaelmika1041 5 лет назад

@@BxlFlorian ??? Me too i don't understand why to need clear:both ?

@nhan1503 5 лет назад

Clear any element that could float left or right, that will spoil the footer if you don't clear

@slimer6023 4 года назад

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...

@smartandfunny6140 6 лет назад

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.

@julianbrooks7141 4 года назад

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.

@karlr2908 3 года назад

Can't believe it's still so complicated to make a footer stay down... this should really get built into the footer element...

@Dani_Krossing 3 года назад

It is much easier with JavaScript 🙂 HTML and CSS isn’t really designed for this type of logic.

@raktim_org 3 года назад

It was very nice "Let's put some text, let's say, Blah blah, blah"...🤣🤣🤣🤣🤣🤣

@priyamganguly 3 года назад

As simple as it can be. No flexbox code, no Javascript, just a light CSS-based solution.

@riiidenntt 3 года назад

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!

@webdev4786 3 года назад

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.

@Sayakvids 3 года назад

thanks

@davidtinsley3078 4 года назад

what program is he using?

@chow7052 5 лет назад

I watched all your html tutorials and learned a lot, thank you, but I found this one very hard to follow, hope you can redo it later

@master_kim2023 4 года назад

Why my footer is on the side of my website? I thought it supposed to be on the bottom? Help me plsss

@MyNegativeCreep 5 лет назад

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.

@Dani_Krossing 5 лет назад

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.

@MyNegativeCreep 5 лет назад

That helps me a lot. Header is the logo right? Thanks =)

@Dani_Krossing 5 лет назад

Header is the part of the website which repeats on all pages :) An example if we were to take the header on RU-vids 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.

@MyNegativeCreep 5 лет назад

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