0

问题

我正在使用这个CSS 粘性页脚的实现。它确实：

html,body{
    height:100%;
}

我使用（希望）使用重复背景，但是，height:100%导致此问题的原因：（ 在此处输入图像描述来自另一个粘性页脚问题的图像，答案不令人满意）

我的理解是图像在渲染时被调整为窗口的大小，因此永远不会超过这个大小。

问题

是否可以继续使用我现有的 CSS 粘性页脚选择，并在长页面上完全呈现重复的背景图像

或者

是否有另一种支持重复背景的 CSS 粘性页脚选项？

以供参考

<div id="wrap">
    <div id="header">Header text</div>
    <div id="main">

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

CSS

* {margin:0;padding:0;} 
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */
#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;}
4

2 回答 2

1

只需添加额外的包装。至少我总是这样做。并将 bg-image 附加到 div#no-footer，它将拉伸到底部

html, body {
    height:100%;
}
#wrap {
    min-height:100%;
    background-image:url(...) top left repeat-x;
}
#no-footer-pad {
    padding-bottom:100px;
}
#footer {
    height:100px;
    margin-top:-100px;
}

html标记：

<html>
<head></head>
<body>
    <div id="wrap">
         <div id="no-footer-pad"></div>
    </div>
    <div id="footer"></div>
</body>

所以你几乎有了这个标记，你必须简单地添加额外的div（#no-footer-pad），这样你的内容就不会重叠页脚

于 2012-07-23T05:30:54.983 回答
0

嘿，现在用来固定这个粘性页脚的位置，就像这样

.footer{
position:fixed;
bottom:0;
left:0;
right:0;
height:xxxx;
}
于 2012-07-23T05:26:19.050 回答