问题

Question

问题

我正在使用CSS粘贴页脚的this实现。它确实：

html,body{
    height:100%;
}

我使用（想要）使用重复背景，但height:100%会导致此问题： enter image description here （来自another粘性页脚问题的图片，答案不满意）

我的理解是，在渲染时，图像的大小会与窗口大小相符，因此不会超过该大小。

问题

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

OR

还有另一种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;}

Answer 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），这样你的内容就不会重叠页脚

Answer 2

嘿，现在习惯为这个粘性页脚固定位置，就像这样

.footer{
position:fixed;
bottom:0;
left:0;
right:0;
height:xxxx;
}

背景用html重复，身高达到100％用css粘性页脚

问题

问题

供参考

2 个答案: