[css] How to stick a footer to bottom in css?

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-bottom-of-page/ but to no good result: my footer always keeps appearing in the middle of the browser window in both FF and IE.

In the HTML i got this simple structure

<form>
 ...
 <div class=Main />
 <div id=Footer />
</form>

Here is the css code that is relevant for the css footer problem:

    *
    {
        margin: 0;
    }


html, body
{
    height: 100%;
}


    #Footer
    {
        background-color: #004669;
        font-family: Tahoma, Arial;
        font-size: 0.7em;
        color: White;
        position: relative;
        height: 4em;
    }



    .Main
    {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;

        /*top: 50px;*/

        margin: 0 25% -4em 25%;

        font-family: Verdana, Arial, Tahoma, Times New Roman;
        font-size: 0.8em;
        word-spacing: 1px;
        line-height: 170%;
        /*padding-bottom: 40px;*/
    }

Where am I doing wrong? I really have tried everything. If I missed any useful info please let me know.

Thank you for any suggestion in advance.

Regards,

thank you all for your answers. it worked with:

position:absolute;
    width:100%;
    bottom:0px;

setting position:fixed did not work in IE for some reason(Still showed footer in the middle of the browser), only worked for FF.

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.

If you use the "position:fixed; bottom:0;" your footer will always show at the bottom and will hide your content if the page is longer than the browser window.

So a Mixed Solution from @nvdo and @Abdelhameed Mahmoud worked for me

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

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/

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

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

The following css property will do it

position: fixed;

I hope this help.

This worked for me:

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}

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.

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

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

#Footer {
position:fixed;
bottom:0;
width:100%;
}

worked for me

For modern browser, you can use flex layout to ensure the footer stays at the bottom no matter the content length (and the bottom won't hide the content if it is too long)

HTML Layout:

<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>
</div>

CSS:

html, body {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}

.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.layout-wrapper > .page-content {
  background: cornflowerblue;
  color: white;
  padding: 20px;
}

.layout-wrapper > header, .layout-wrapper > footer {
  background: #C0C0C0;
  padding: 20px 0;
}

Demo: https://codepen.io/datvm/pen/vPWXOQ

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

That will make the footer stay at the bottom of the browser window no matter where you scroll.