How to make footer stick at the bottom of web page in html

Question

My css for footer

.my_footer {
    background-color:#00FFFF;
    height: 60px;
}

.my_footer p {
    padding-top:20px;
    font-size:14px;
    font-color:#191970;
}

On my first page of html, footer position is at the bottom which is normal. But when I go to the next pages, the position of the footer changes. I have tried fixed-bottom, but that is nothing works for me

My footer.html:

<footer>
    <div class=" footer navbar-fixed-bottom my_footer">
        <p class="text-center">&copy; A&A shop pvt ltd.All rights Reserved</p>
    </div>
</footer>

score 0 · Answer 1 · answered Dec 17 '22 at 08:16

0

if you want your footer to fixed at bottom then

element{
   position: fixed;
   left: 0;
   bottom: 0;
}

or if you want your footer to fixed at bottom and also stay at bottom on scroll then

element{
  position: sticky;
  bottom: 0;
}

answered Dec 17 '22 at 08:16

shoaib sabir

605
2
9
23

these codes are not working – alan antony Dec 18 '22 at 09:10

Mr-montasir · Answer 2 · 2022-12-19T12:06:46.403

0

SOLUTION 1:

USING FLEXBOX

Give the body (or whatever you have as a container of the page) a display:flex and flex-direction:column so they go under each other, then give it margin-top:auto or justify-self:flex-end, both of these works perfectly for me.

body {
    display:flex;
    flex-direction:column;
}
footer {
    margin-top:auto;
    /*OR*/
    justify-self:flex-end;
}

SOLUTION 2:

USING POSITION ABSOLUTE

The second solution is with position:absolute

Live Preview

footer {
   position:absolute;
   bottom: 0;
}

edited Dec 19 '22 at 12:06

answered Dec 17 '22 at 08:16

Mr-montasir

132
1
1
8

these codes are not working – alan antony Dec 18 '22 at 09:11
I updated it, this time i'm sure it will work :) – Mr-montasir Dec 18 '22 at 11:13
i have applied every code but i dont see any changes. do you think there is a problem in css – alan antony Dec 19 '22 at 09:13
I'm not sure, I think if you attached a codepen it will be great. – Mr-montasir Dec 19 '22 at 11:32
Have a look here: https://codepen.io/Mr-montasir/pen/qByBrKm – Mr-montasir Dec 19 '22 at 11:47
Also try to add `html,body {min-height:100vh}` This also may cause that the footer does not goes to the bottom of the page. – Mr-montasir Dec 19 '22 at 11:55
why the first page shows like this – alan antony Dec 20 '22 at 11:49
I checked that link but it asks me to request access and I did, you received something? – Mr-montasir Dec 20 '22 at 13:24
https://drive.google.com/file/d/1XufLqRCU8J5hvWFy1uTxqjZR7c-Ik4QJ/view?usp=share_link – alan antony Dec 20 '22 at 18:33
You need to make sure that the footer is not nested into any other div, and put it directly inside the body – Mr-montasir Dec 20 '22 at 18:56
you mean my footer.html is not correct? – alan antony Dec 21 '22 at 12:38
What do you have in footer.html file? only the code you mentioned above or also something else? – Mr-montasir Dec 21 '22 at 13:07
i have the same code – alan antony Dec 21 '22 at 13:12

Monirul Islam · Answer 3 · 2022-12-17T08:48:02.890

0

You can try using this CSS.

    .my_footer {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
    }

edited Dec 17 '22 at 08:48

answered Dec 17 '22 at 08:20

Monirul Islam

36
5

these codes are not working – alan antony Dec 18 '22 at 09:11

How to make footer stick at the bottom of web page in html

3 Answers3