css - 粘性页脚失败-6ren

css - 粘性页脚失败

转载作者：行者123 更新时间：2023-11-28 11:13:41

我试图让我的页脚正确，但遇到了问题。我能够将页脚保持在页面底部，但很快意识到当窗口变小时，它最终会覆盖内容。我可以通过取消 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>

最佳答案

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

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

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

关于css - 粘性页脚失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12271378/