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.

回答1:

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

回答2:

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

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

回答3:

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

worked for me

回答4:

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/

回答5:

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

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

回答6:

This worked for me:

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

回答7:

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.

回答8:

The following css property will do it

position: fixed;

I hope this help.

回答9:

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

回答10:

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.

来源：https://stackoverflow.com/questions/1488565/how-to-stick-a-footer-to-bottom-in-css

标签

css

sticky-footer