WordPress的粘滞页脚二十二

Question

我试图让my website的页脚粘在页面的底部。我已经使用Firebug进行了一些检查，发现页脚正在与网站内容的其余部分一起被包裹。

我的理论在这一点上是页脚应该坚持页面的底部，如果定义页面高度的组件设置为100％，则将页脚留在该元素下面。

如果有人可以检查代码并给我一些编辑指令，我会绝对不知道该从哪里继续下去。

Answer 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元素可能是一个挑战，但希望这会让你指出正确的方向。

Answer 2

您需要在.css中添加/修改#footer，因为这需要设置为position：fixed;为了将其“粘”到底部，值得添加margin-bottom：0px;或底部：0px;以便触及页面的底部，并将宽度设置为宽度：100％; ...如果你可以检查你的CSS的#footer的，或者添加为下面只是太看看会发生什么，那么我们可以从那里玩一下..

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

你也应该真正增加高度：** * PX;根据页脚的“高度”需求，您可以玩这个功能，直到此行符合您页脚的顶部，以便当您上下滚动时，页面文本完全符合此行。