sticky footer floating in the page when resizing

问题

I'm trying to make my footer stick to the bottom of the page . pages of my site is not at the same height . I tried every thing on the web but nothing worked when zoom in\out or resizing browser window it jambs with the browser and floats in the middle of my divs , tables , ..etc here's the original footer css :

#footer
{
    width:100%;
    height:20px;
    vertical-align:middle;
    font-size:10px; 
    font-weight:bold;
}
#footer ul
{
    margin-top:10px;
    margin-right:10px;
    margin-left:30px;
    color: #797979;
    line-height:11px;

}
#footer ul li
{
    float:left;
    border-right:1px solid #797979;
    list-style:none;
    margin:0 5px 5px 0;
    padding-right: 5px;
}
#footer ul li a
{
    color: #797979;
    text-decoration:none;
}
#footer ul li a:hover
{
    text-decoration:underline;
}
#footer .copyright
{
        margin-top:5px;
    float:none;
        text-align:center;
}

and html looks like :

<div id='main'>
<div id='header'>
</div>
   <form id='myform'>
     <div id='form_div'>
     </div>
   </form>
  <div id='footer'>
  </div>
</div>

and here's all methods I've tried :

http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/

http://www.cssstickyfooter.com/

http://alistapart.com/article/footers

http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/

and many others ...

I tried to put :

#footer 
{ 
bottom:0;
position: fixed
}

it sticks with this but of course when resizing browser it's not seems there's a problem in css p.s : I'm not the one who wrote it I'm just using it and trying to fix it

回答1:

Try Ryan Fait's sticky footer. It's incredibly simple and cross-browser compatible.

来源：https://stackoverflow.com/questions/14786483/sticky-footer-floating-in-the-page-when-resizing

标签

css

sticky-footer