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

  ...  
  
 
 

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:

This worked for me:

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

回答6:

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

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

回答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:

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.

文章来源: How to stick a footer to bottom in css?