粘性页脚失败答案

【问题标题】：Sticky Footer failure粘性页脚失败
【发布时间】：2012-08-29 13:53:56
【问题描述】：

我正在尝试使页脚正确，但遇到了问题。我能够将页脚保持在页面底部，但很快意识到当窗口变小时，它最终会覆盖内容。我可以通过取消 position:absolute 来解决这个问题，但是如果我这样做，页脚将不再停留在页面底部。

我已经尝试了很多不同的方法来让它工作，但这是我目前正在研究的，我希望有人可以在这里提供一些建议..

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。使用上面的代码，页脚很好，位于底部，但在窗口变小时会覆盖内容。我能做什么？

HTML基本如下

<body>
    <div id="wrapper">
        <div id="content">
        </div>
        <div id="footer">
        </div>
    </div>
</body>

【问题讨论】：

最佳答案——请不要。粘性页脚会在小屏幕上导致各种可访问性问题。更不用说许多用户觉得它们很烦人。
jQuery Mobile 使用固定页脚在较小的屏幕上效果很好。固定页脚不一定是坏事——这完全取决于技术的使用方式。
请在How do I get page content to stretch and stick footer to bottom of the page?查看我的回答。经过一番研究，我发现了一篇题为Sticky CSS footers: The flexible way 的文章，它使用display: table; 将页脚置于窗口底部。

标签： css footer

【解决方案1】：

在页脚使用position: fixed; 规则，在<body> 标记上使用底部margin。

http://jsfiddle.net/JGUYh/

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;
}

请注意，根据窗口大小，页脚有时会覆盖内容。但是滚动会显示任何隐藏的内容。

【讨论】：

谢谢，我希望找到一些永远不会涵盖内容的东西，如果可能的话，我认为一定是这样吗？我要在 cmets 中尝试其他人的解决方案