WordPress 二十十二的粘性页脚答案

【问题标题】：Sticky footer with WordPress Twenty TwelveWordPress 二十十二的粘性页脚
【发布时间】：2013-01-01 15:09:29
【问题描述】：

我试图让my website 的页脚贴在页面底部。我对 Firebug 进行了一些检查，发现页脚当前正在与网站的其余内容一起包装。

此时我的理论是，如果定义页面高度的组件设置为 100%，页脚应该贴在页面底部，而页脚则留在该元素下方。

如果有人可以检查代码并给我一些编辑内容的说明，我将不胜感激，因为我完全不知道从哪里继续。

【问题讨论】：

标签： wordpress footer sticky

【解决方案1】：

根据here 的粘性页脚代码示例，您需要从重新组织页面布局开始。

您网站上的代码是：

<div id="page" class="hfeed site">
    <header id="masthead">Header code</header>
    <div id="main">page body code</div>
    <footer id="colophon">footer code</footer>
</div>

为了使用我发送的示例链接使粘性页脚工作，您需要使用类似这样的方式重构您的网站代码（注意页脚在 DIV 之外）：

<div id="page" class="hfeed site">
    <header id="masthead">Header code</header>
    <div id="main">page body code</div>
</div>
<footer id="colophon">footer code</footer>

随之而来的 CSS 代码如下所示：

<style type="text/css">
html, body {height: 100%;}

#page {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#colophon {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}
</style>

我之前使用过粘性页脚，效果很好，但我没有在 WordPress 网站中使用过它，所以你必须使用它。重新组织主要的 HTML WordPress 元素可能是一个挑战，但希望这能让您找到正确的方向。

【讨论】：

【解决方案2】：

您需要在 .css 中添加/修改 #footer，因为这需要设置为 position:fixed;为了将其“粘贴”到底部，值得添加 margin-bottom:0px;或底部：0px；这样它就会触及页面的最底部，并将宽度设置为 width:100%; ...如果您可以检查您的 .css 中的#footer，或者将其添加如下，看看会发生什么，那么我们可以从那里开始玩..

#footer {position:fixed; margin-bottom:0px; width:100%;}

您还应该真正添加高度：***px；根据页脚需要有多“高”，您可以一直使用它，直到该行与页脚顶部相遇，这样当您向上和向下滚动时，您的页面文本与该行完美匹配

【讨论】：