如何使这个粘性页脚起作用? [英] How can I get this sticky footer working?

查看:98
本文介绍了如何使这个粘性页脚起作用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经在我的网站上的此处上应用了CSS粘性页脚教程.为什么我无法使它正常工作?

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

谢谢.

推荐答案

从#body移除上边距,并用padding替换它:

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;
}

为html(不仅是正文)添加100%的高度:

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

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

完整的JSBin解决方案 查看全文

登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆