0

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

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

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

4

2 回答 2

0

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

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

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

于 2013-04-18T11:25:39.607 回答
0

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

您网站上的代码是：

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

于 2013-02-14T20:43:11.520 回答