【问题标题】: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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-11-07
    • 2013-07-09
    • 1970-01-01
    • 2013-05-23
    • 1970-01-01
    相关资源
    最近更新 更多