How can I get this sticky footer working?

血红的双手。 提交于 2019-12-11 18:18:39

问题


I've applied the CSS sticky footer tutorial that I got from here on my website, but for some reason I can't get it to work?

JSBin

Thanks in advance.


回答1:


Remove the top margin from #body and replace it with padding:

#body {
    width: 1200px;
    margin: 0 auto;
    overflow:auto;
    padding-top: 80px;
    padding-bottom: 170px;
}

add 100% height to html (not only body):

html, body {
  background-color: #FFF;
  margin: 0;
  padding: 0;
  height: 100%;
}

Full JSBin solution and preview




回答2:


Did you apply the correct #footer id in your HTML code?

<div id="footer">

</div>



回答3:


I can not immediatly see what is wrong with your code (it is a lot of css, and you use strange tags like center). I swear by this version of the sticky footer however: http://ryanfait.com/sticky-footer/

Works fine for me and is very much legacy/cross browser compatible. Perhaps this is an option for you...



来源:https://stackoverflow.com/questions/15799155/how-can-i-get-this-sticky-footer-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!