1

smiths-heimann.az 是我的网站。尝试了来自http://www.cssstickyfooter.com/的所有说明，但它对我不起作用（证明它不起作用http://smiths-heimann.az/?page=3）。请帮助我将页脚添加到页面底部并 提前删除 2 个 div 之间的空行http://prntscr.com/2e2fp Thx

4

2 回答 2

3

你#footer在里面#wrap。粘性页脚代码在外部 #wrap有页脚：

<div id="wrap">
    <div id="main">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>

<div id="footer">
</div>

编辑

刚刚使用移动的页脚代码查看了您的网站。您在底部有一个间隙，如果您不想要它，可以通过使#footer'height与 footer's 相同margin-top但为正来解决。

编辑其他问题

在您的标题中，您有一个ul带有几个类的导航sf-menu：sf-js-enabled和sf-shadow。如果你把它取margin-bottom: 1em下来，间隙就会消失。

编辑到非拉伸背景问题

这仍然很简单，尽管它会稍微改变标题的透明度。

在您的 CSS 文件中找到background-imagefor#container并将其移动到#wrap. 为了澄清，#wrap应该有这个CSS：

#wrap 
{
    min-height: 100%;
    background: url("img/tff.png") 0 0 repeat;
}

#container应该是这样的：

#container 
{
    min-width: 980px;
    width: 100%;
    overflow: auto;
    padding-bottom: 110px;
}

第二次编辑非拉伸背景问题

好的。唷。我做的; 我也删除了滚动条。

成为#footer：

#footer {
    background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border-top: 1px solid #919191;
    clear: both;
    font-size: 10px;
    height: 110px;
    margin-top: -126px;
    padding-top: 5px;
    position: relative;
    text-align: center;
    width: 100%;
}

出现滚动条是因为边框和填充为页脚增加了额外的高度，因此负边距实际上太小了。我已将其更改为-116px. 虽然这在 Firefox 中有效，但 OP 发现它在 Chrome 中不起作用。最终，使用经过编辑的图像来获得所需的功能。仅将此答案用作参考。

现在做#wrap这个：

#wrap {
    background: url("img/tff.png") repeat scroll 0 0 transparent;
    height: auto;
    margin-top: 100px;
    min-height: 100%;
    position: relative;
}

最后，做.header这个：

.header {
    background-image: url("img/nav/trans.png");
    color: white;
    height: 80px;
    top: -100px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    position: relative
}
于 2011-07-22T19:06:34.107 回答
0 
 margin-top: -150px;

失去那个 CSS

于 2011-07-22T19:05:13.293 回答