粘性页脚故障 [英] Sticky Footer failure
问题描述
我正在尝试使页脚正确，但是出现问题.我能够将页脚放在页面底部，但是很快就意识到，当窗口变小时，它最终覆盖了内容.我可以通过以下方法解决此问题:绝对但如果这样做的话，页脚将不再停留在页面底部.
I am trying to get my footer correct but am having issues. I was able to keep the footer down at the bottom of the page but then soon realized that when the window is made small, it ends up covering content. I can fix this by taking away position:absolute BUT the footer no longer stays at the bottom of the page if I do this.
我已经尝试了很多不同的方法来使它起作用，但这就是我目前正在寻找的东西，我希望有人可以在这里提供一些建议.
I've tried a lot of different things to get this to work, but this is what I am currently looking at, I am hoping someone could lend some advice here..
CSS 代码:
html, body {
margin: 0;
padding: 0;
height:100%;
}
#wrapper {
width:900px;
background-color:#FAFAFA;
min-height:100%;
margin:0 auto -45px;
height: auto !important;
height:100%;
}
#content{
margin-top:40px;
float: left;
padding-left:100px;
padding-bottom:30px;
overflow:auto;
}
#footer{
height:30px;
bottom:0;
background:#D2CFCF;
width:900px;
clear:both;
position:absolute;
}
我最近在页脚中尝试了margin-top:-30px和position:relative.在上面的代码中，页脚很漂亮，位于底部，但是当窗口变小时，它覆盖了内容.我该怎么办?
I recently tried margin-top:-30px in the footer, and position:relative. With the code above, the footer is nice and seated on the bottom but covers content when the window is made small. What can I do?
HTML 基本上如下
<body>
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
推荐答案
在页脚中使用position: fixed;规则，在<body>标签上使用底部的margin.
Use a position: fixed; rule on the footer and a bottom margin on the <body> tag.
BODY {
margin: 0 0 60px 0; /* keep regular content clear of the footer */
}
#footer {
position: fixed;
width: 100%;
height: 50px;
bottom: 0px;
background: #ccc;
overflow: hidden;
}
请注意，根据窗口大小，页脚有时会覆盖内容.但是滚动将显示任何隐藏的内容.
Note that depending on the window size the footer will cover the content sometimes. But scrolling will reveal any hidden content.
这篇关于粘性页脚故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
