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

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 >
        <p >&copy; A&A shop pvt ltd.All rights Reserved</p>
    </div>
</footer>

CodePudding user response：

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

CodePudding user response：

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;
}
.my_footer {
    margin-top:auto;
    /*OR*/
    justify-self:flex-end;
}

SOLUTION 2:

USING POSITION ABSOLUTE

The second solution is with position:absolute which i don't prefer to use, but it still working:

.my_footer {
   position:absolute;
   top:100%;
   transform:translateY(-100%);
}

CodePudding user response：

You can try using this CSS.

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