如何将页脚粘贴到底部？有点扭曲答案

【问题标题】：How to stick footer to bottom? With a little twist如何将页脚粘贴到底部？有点扭曲
【发布时间】：2012-12-20 05:02:41
【问题描述】：

所以基本上我想在页面底部添加页脚

但是我的页面内容是动态的，所以有时候内容很长，有时候很短

我已经通过谷歌搜索并找到了很多结果，但是当我尝试时，它们在内容很短的情况下工作，但如果内容很长，它会粘在窗口底部（不是页面）并重叠内容

用javascript没关系，但如果你有纯CSS的就更好了

【问题讨论】：

这不起作用？ stackoverflow.com/questions/42294/…
你能贴出你用过的跟踪代码吗？我们可以帮助您
@grayb: 我试过了，但是不行。我现在不能再试了，因为我在用手机
@aravind：“重叠”的使用位置：绝对，我无法发布完整的代码，因为我现在正在使用电话
@gamehelp16 您已将高度调整为与您的页脚大小相同？这样做是为了让包装类包含除页脚类之外的所有内容？

标签： css footer sticky-footer

【解决方案1】：

#footer{
    position:fixed; 
    bottom:0;
    height:200px;
}

body
{
    min-height:100%;
    padding-bottom:200px; /* same as footer height */
}

【讨论】：

我稍后再试
我试过了，但我不希望页脚粘在窗口底部，而是粘在文档底部
对不起，我误会了。你能澄清你想要什么吗？也许您的意思是“当内容高度 + 页脚高度小于窗口高度时，如何将页脚粘贴到窗口底部？”
所以如果内容的长度小于窗口的高度，并且如果内容的长度大于窗口的高度，则页脚将位于内容下方。顺便说一句，现在已经解决了

【解决方案2】：

这不使用固定位置，因此它不会始终显示在视口底部。

来自here的CSS

你也可以看到关于这个here的讨论

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

【讨论】：

【解决方案3】：

我可以找到一个 css 解决方案（不是 100%）

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

在下面的这个链接 Fixed css footer

您也可以查看其他 SO 帖子

Footer position bottom and center

how to make footer fixed in a page

【讨论】：