How to stick a footer to bottom in css?

Question

I am having the classic problem for the positioning of a Footer on the bottom of the browser. I\'ve tried methods including http://ryanfait.com/resources/footer-stick-to-bot

Answer 1

Assuming you know the size of your footer, you can do this:

    footer {
        position: sticky;
        height: 100px;
        top: calc( 100vh - 100px );
    }

Answer 2

I agree with Luke Vo's solution. I thought it would better to omit justify-content: space-between; from layout-wrapper and add margin-top: auto; to footer.

You wouldn't want your body to be hanging in the middle and only have footer pushed to the bottom.

This approach addresses any content extending beyond the viewport.

Answer 3

#footer{
position: fixed; 
bottom: 0;
}

http://codepen.io/smarty_tech/pen/grzMZr

Answer 4

Try setting the styles of your footer to position:absolute; and bottom:0;.

Answer 5

I had a similar issue with this sticky footer tutorial. If memory serves, you need to put your form tags within your <div class=Main /> section since the form tag itself causes issues with the lineup.

Answer 6

I think a lot of folks are looking for a footer on the bottom that scrolls instead of being fixed, called a sticky footer. Fixed footers will cover body content when the height is too short. You have to set the html, body, and page container to a height of 100%, set your footer to absolute position bottom. Your page content container needs a relative position for this to work. Your footer has a negative margin equal to height of footer minus bottom margin of page content. See the example page I posted.

Example with notes: http://markbokil.com/code/bottomfooter/