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的#foot，或者将其添加如下，只是看看会发生什么，那么我们可以从那里开始玩......

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

你还应该加上身高：*** px;根据页脚的“高”程度，你可以玩这个，直到这条线符合你的页脚顶部，这样当你向上和向下滚动时，你的页面文字完全符合这条线

WordPress Twenty Twelve的粘性页脚

2 个答案: