背景重复与html，身体高度到100％与css粘滞脚注 [英] background repeat with html,body height to 100% with css sticky footer
问题描述
问题
我使用粘性页脚问题与不满意的答案）
这是我的理解，图像大小到窗口的大小，在渲染，因此从来没有大小过去。
问题
可以继续使用我现有的CSS粘性页脚完全在长页上呈现
或
还有CSS粘性页脚的另一个选项，它支持重复的背景？
参考
< div id =wrap >
< div id =header>标题文字< / div>
< div id =main>
< / div>
< / div>
< div id =footer>页脚文本< / div>
CSS
* {margin：0; padding：0;}
html，body {height：100％;}
#wrap {min-height：100％;}
#main {overflow：auto;
padding-bottom：180px;} / *必须与页脚相同高度* /
#footer {position：relative;
margin-top：-180px; / *页脚高度的负值* /
height：180px;
clear：both;}
附加包装器。至少我总是这样做。并将bg-image附加到div＃no-footer，它将延伸到底部
html，body {
高度：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 ），以便您的内容不会与页脚重叠
Problem
I'm using this implementation of a CSS sticky footer. It does:
html,body{
height:100%;
}
I use (would like to) use a repeating background, however, the height:100% causes this issue:
(image from another sticky footer question with unsatisfactory answers)
It's my understanding that the image gets sized to the size of the window at rendering, and thus never sizes past that.
Question
Is it possible to continue to use my existing choice of CSS sticky footer with a repeating background image rendered completely on long pages
OR
is there another option of CSS sticky footers which does support the repeating background?
For reference
<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;}
Simply add additional wrapper. At least I always do exactly that. And attach bg-image to div#no-footer, it will stretch to the bottom
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 markup:
<html>
<head></head>
<body>
<div id="wrap">
<div id="no-footer-pad"></div>
</div>
<div id="footer"></div>
</body>
So you have almost this markup, you must simply add additional div (#no-footer-pad), so that your content would not overlap footer
这篇关于背景重复与html，身体高度到100％与css粘滞脚注的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
