CSS：粘性页脚不起作用答案

【问题标题】：CSS: Sticky footer not workingCSS：粘性页脚不起作用
【发布时间】：2012-11-26 13:26:05
【问题描述】：

如果您比较以下 2 个页面：

第1页：http://goldencraft.co/wp/

第2页：http://goldencraft.co/wp/contact/

CSS：http://goldencraft.co/wp/wp-content/themes/minecraft/style.css

您会看到，当有内容时，页脚没有正确粘贴。我一直在尝试修复它一个小时，所以我希望有人能在 CSS 中发现问题，谢谢。

Example of sticky footer

【问题讨论】：

如果我的回答有效，请告诉我，@BrianGraham。

标签： css sticky-footer

【解决方案1】：

罪魁祸首似乎是iframe 就在</body> 标签之前。它有一个visibility:hidden 规则，允许它替换页面上的元素（与display:none 相比）。

您可以删除它，也可以添加以下 css：

iframe {
  display:none;
}

【讨论】：

我在我的 Chrome 浏览器上看不到 iframe，但这无论如何都解决了问题。谢谢。
这很奇怪。它肯定在我的 Chrome 网络检查器中（这就是我发现它的方式......）。哦，很高兴我能帮上忙！ :)

【解决方案2】：

现在只需在您的 css 文件中替换为您的 #footer ID

#footer {
    background-color: #252525;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
}

【讨论】：

我不希望它与页面一起移动，我希望它被推到底部而没有它下方的愚蠢空间（接触时）。

【解决方案3】：

试试这个

CSS

html,body{height:100%; width:100%; margin:0px; padding:0px;}
#wrapper{width:100%; height:100%; min-height:100%; height:auto; margin:0 auto; margin-bottom:-100px !important; background-color:#999999;}
#push{min-height:100px;}
#footer{min-height:100px; width:100%; overflow:hidden; background-color:#FF0000;}

HTML

<body>
    <div id="wrapper">
        <div id="push"></div><!-- do not remove -->
    </div>
    <div id="footer">Footer</div>
</body>

【讨论】：