CSS To Position Footer always at the bottom but not Fixed or Sticky

[@samrathsinghsaini3706]

Easiest and the most in depth explanation. You helped me fix a problem that has been bugging me for a while. Thank you!

[@SirChogyal]

Great to hear! 🙏

[@curumakito]

Thank you, I trying to put all my knowledge in the footer and body, but was more simple that I was thinking. I hope you have a nice day wherever and whenever you read this.

[@SirChogyal]

Same to you! Thanks a lot!

[@marcy1]

Wow this is the best on the whole internet, thanks! I really needed this for a school project, but I'll use it on my own webpage too.

[@SirChogyal]

Thanks for your kind words. 🙏🙏🙏😋

[@niveronegaming]

THANKS BRO HELPED A LOT been struggling for days and this one made my code work right.

[@SirChogyal]

Glad to hear it.

[@Rozwadniacz]

Great tutorial, helped me with 2 day's of struggling, Thank's a lot!

[@SirChogyal]

😍😋🙏

[@RenardBergson]

Thank you! It worked well. Sometimes, CSS doesn't have a clearly solution for such a simple issue.

[@SirChogyal]

Great to hear! 👍

[@dominikmoravcik1896]

There is an easier way to achieve this. First, set the parent element (which could be the 'body') to have the following CSS properties: 'flex-direction: column;', 'min-height: 100vh;', and 'display: flex;'.
Secondly, in your 'footer' class, simply add 'margin-top: auto;'.
That's all you need to do.

[@SirChogyal]

It can be as shown below:
html {
height: 100%;
box-sizing: border-box;
}
body {
margin: 0;
display: flex; /* This makes the body a flex container */
flex-direction: column; /* Sets the flex container to have a vertical column layout. */
min-height: 100vh; /* Ensures that the body takes up at least the full height of the viewport. */
box-sizing: inherit;
}
footer {
background: greenyellow;
font-size: 18px;
padding: 35px;
text-align: center;
margin-top: auto; /* Push the footer to the bottom */
}
Note: padding-bottom: 6.74rem; - no longer necessary due to the use of flexbox to position the footer at the bottom. This property was originally used for pushing the footer down when using absolute positioning.

[@rileyhampson]

@@SirChogyal Thanks for this! It has really helped me with my assignment.

[@danyellog234]

YOU ARE THE GOAT I LOVE YOU

[@SirChogyal]

thank you so much

[@Luis_Rodz]

Thank you very much, I have been trying to solve that for a long time and this tutorial has served me perfectly

[@SirChogyal]

Great to hear!😋

[@chubaofficial9125]

Thank you so much for this tutorial. You have helped me to do my assignments 😊

[@SirChogyal]

You're welcome 😊

[@dushmantdash2340]

Thanks a lot for solving my problem ❤

[@SirChogyal]

Most welcome 😊

[@sleepingman23]

Thanks bro. 🙂😄

[@SirChogyal]

Welcome 😊

[@AnupaPrabhasara]

Wow bro. Superb video😍

[@SirChogyal]

Thanks 🤗

[@The-Prottotype]

many thanks ... exactly what I was looking for

[@SirChogyal]

👍👍👍

[@salmadiaaelabsi]

this solved my problem, thank you so much sir!

[@SirChogyal]

You are most welcome. It is great to hear from you.

[@rozahiransamintaib5002]

you have saved my life : )

[@SirChogyal]

🙏😊😊

[@ibnubintangbaladnezar9300]

thanks man you help my problem as a beginner

[@SirChogyal]

Glad to hear it! There will be more beginner's guide coming up.

[@muhamadizranovan1653]

you're truly lifesaver!

[@SirChogyal]

Thanks!

[@ajpenano]

Thank you for the simple explanation. It worked for me!

[@SirChogyal]

I am gad that it had worked for you. Thank you!

[@YoussefYaser-b3w]

thank you , you are a good man

[@SirChogyal]

So nice of you 👍🙏😊👌

[@jerkozlopasa8596]

Hi, this solved my problem, thank you very much! Liked and subscribed!

[@SirChogyal]

Glad it helped 😋👍

[@oOOArcadiaOOo]

Thank you so much, this helped me a lot!!!

[@SirChogyal]

Glad it helped!🥰

[@web-dev.ashishk]

thank you man i help in my project

[@SirChogyal]

Great!

[@taher1957]

thank u sir i was workin on a project and was not able to put a right footer thank u for this video

[@SirChogyal]

Always my pleasure.💌

[@Dr.BananaCraft]

thanks for this Video! it was really helpful :D

[@SirChogyal]

Glad to hear from you. 🙏👍

[@KaiBuskirk]

Thank you! Great job do more!

[@SirChogyal]

Sure.

[@emdadhossain7396]

I have a question..
My page has header and a footer and a" sign up " form. Whenever i want to write in the sign up form the footer comes up my keyboard( im on mobile). I did what you did and the problem isnt solved. But my footer is successfully sticky in the bottom.. But when i write in the form.. It gets up and blocks the input bars..
Do you have any recommendation what to do to fix it??

[@SirChogyal]

Thanks for reaching out. I understand the issue you're facing with the footer blocking the input bars when using the sign-up form on mobile. You can try the following adjustments:
Adjust Footer Positioning:
Modify the CSS for your footer to make it sticky only when needed. Update the position property to "fixed" for normal situations and "absolute" or "relative" when the keyboard is active.
footer {
text-align: center;
position: fixed; /* Change to "absolute" or "relative" when the keyboard is active */
right: 0;
left: 0;
bottom: 0;
}
Use JavaScript to Detect Keyboard:
If the CSS adjustment alone doesn't solve the problem, you can use the following JavaScript to dynamically detect keyboard activity and adjust the footer position accordingly.
window.addEventListener('resize', function() {
var footer = document.querySelector('footer');
if (window.innerHeight < window.screen.height) {
// Keyboard is active, make the footer relative or absolute
footer.style.position = 'absolute'; // or 'relative'
} else {
// Keyboard is not active, make the footer sticky
footer.style.position = 'fixed';
}
});

[@emdadhossain7396]

@@SirChogyal Thanks for replying! Ill try it out 👍

[@alejandrocarvajalalek3666]

Much appreciated man

[@SirChogyal]

😍🙏🙏

[@michaelfernandez4016]

Thank you very very much 🙏🏼

[@SirChogyal]

You are very welcome

[@keiralkwovo]

Thank u!!☺
from HongKong

[@SirChogyal]

You're welcome 😊 It's good to see you here.

[@Big_Dot_Inc]

I have one issue with my page, i have header main and footer , when i enter text in main , the text show all the way up under the footer ! i made the header transparent and i can see the text but i want the text right under the header automatically, any help will be appreciate .

[@SirChogyal]

Oh I see. Can you show me your sample project?

[@lsvlog0007]

Thanks it works

[@SirChogyal]

Nice to see your kind words! It means a lot to me that my content was able to help you. 👍👍👍

[@Big_Dot_Inc]

Thank you !

[@SirChogyal]

You're welcome!👍

[@TonyDiem]

Why the specific 6.74rem on the padding-bottom?

[@SirChogyal]

That's not specific. You can adjust as per your wish.

[@Rasel720]

thanks. it works for me

[@SirChogyal]

You're welcome!

[@agarg7731]

sir why you gave 100 percent height to html tag in css ??

[@SirChogyal]

Setting the height of the HTML to 100% allows the web page to occupy the full height of the viewport.

[@AgemiroAlves11]

Thanks so much!!

[@SirChogyal]

My pleasure!

[@ParasProgramming123]

not working for me as i increase the content footer overlaps

[@SirChogyal]

You have to adjust the padding-bottom as per your requirement. Hope this will fix your issue.

[@MuhammadUsman-ok5vs]

Excellent

[@SirChogyal]

Glad you found it helpful! 😊

[@its_ypin1868]

Thanks a lot

[@SirChogyal]

Always my pleasure! Thanks for your kind words!

[@007leonard1]

how do i do something similar on wordpress?

[@SirChogyal]

You can apply the same technique.

[@HIZZ_FAMILY]

tengkiyu ....

[@SirChogyal]

My pleasure...👌

[@somangovdoctor]

thanks brother

[@SirChogyal]

No problem ❤️

[@Serizon_]

thanks!

[@SirChogyal]

No problem!

[@suvendubiswal6820]

Very good

[@SirChogyal]

Thanks dude!

[@hugosouza1993]

Great!

[@SirChogyal]

Thanks!

[@actechbadhabits]

Thankuuuuu

[@SirChogyal]

🙏🙏🙏

[@M_e_e_T_Patel]

👍👍👍👍

[@SirChogyal]

Thanks!