CSS 使页脚图像粘在网络浏览器或页面的底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2221631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making footer image stick to bottom of web browser or page
提问by
I know this has been asked alot of times in the past but for the life of me I can't seem to get any of the other solutions to work.
我知道这在过去曾被问过很多次，但对于我的生活，我似乎无法让任何其他解决方案发挥作用。
What I'm trying to do is to get the footer (which is an image that repeats across the width of the page) to stick to the bottom of the browser when there isn't enough content to naturally push it to the bottom of the page and when there IS enough content to push it to the bottom it does just that. An example is the one at http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htmwhich does exactly what I want but I can't get to work either.
我想要做的是当没有足够的内容自然地将页脚推到页面底部时，让页脚（这是一个在页面宽度上重复的图像）粘在浏览器的底部页面，当有足够的内容将其推送到底部时，它就会这样做。一个例子是http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm 上的那个，它完全符合我的要求，但我也无法开始工作。
The code that I've currently got implemented makes the footer stick to a certain section of the page with text going under it. You can see it at sourcectrl.co.uk but its not much to look at. Heres the code for your viewing pleasure.
我目前已经实现的代码使页脚粘在页面的某个部分，文本在它下面。您可以在 sourcectrl.co.uk 上看到它，但没什么可看的。继承人代码为您的观看乐趣。
html, body {
font: 100% Arial, Helvetica, sans-serif;
height: 100%;
color: #597347;
margin: 0;
padding: 0;
background: #573909;
}
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 66px;
background: url(../images/FillerPage_01.gif) repeat-x left bottom;
}
section {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: 87px;
position: relative;
padding-bottom: 90px;
}
footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 87px;
background: url(../images/FillerPage_08.gif) repeat-x left bottom;
}
Sorry if it seems messy! I'd just like to know if I'm heading in the right direction or theres something I'm just not getting? Oh yeah I'm trying to do all of this with the html 5 markup which is why there is no #footer and the like (could this be why none of the solutions work?).
对不起，如果它看起来很乱！我只想知道我是否在朝着正确的方向前进，还是我没有得到一些东西？哦，是的，我正在尝试使用 html 5 标记来完成所有这些操作，这就是为什么没有 #footer 之类的原因（这可能是所有解决方案都不起作用的原因吗？）。
If anyone could give me any help or guidance I'd be soooooo grateful.
如果有人能给我任何帮助或指导，我将不胜感激。
回答by jay
I believe the code you are looking for is here:
我相信您正在寻找的代码在这里：
http://www.themaninblue.com/writing/perspective/2005/08/29/
http://www.themaninblue.com/writing/perspective/2005/08/29/
I implemented this just now on my site, and it's working great!
我刚刚在我的网站上实现了这个，并且效果很好！
it's a while since you asked your question but hopefully this helps!
你问你的问题已经有一段时间了，但希望这会有所帮助！
回答by Chris J
This is the source that helped me achieve such a layout :
这是帮助我实现这种布局的来源：
http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx
http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx
回答by JaredH20
Put everything in the Main in a Wrapper and use the following code:
将 Main 中的所有内容放入 Wrapper 并使用以下代码：
html, body, form
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px; (-80px will be different for you, usually the same as the footer but negative but mine is different)
}
#footer, .push
{
height: 60px; (This is just the height of MY footer, change this to whatever size your footer is)
}
