Question

如果您比较以下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

Answer 1

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

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

iframe {
  display:none;
}

Answer 2

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

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

Answer 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>

CSS：粘性页脚无法正常工作

3 个答案: