Question

我试图让我的页脚正确但是有问题。我能够将页脚保持在页面底部，但很快就意识到当窗口变小时，它最终会覆盖内容。我可以通过取消位置来解决这个问题：绝对但如果我这样做，页脚就不再停留在页面的底部。

我尝试了很多不同的工作来实现这个目标，但这正是我目前所看到的，我希望有人可以在这里提供一些建议..

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，并且位置：相对。使用上面的代码，页脚很好并且坐在底部，但是当窗口变小时覆盖内容。我该怎么办？

HTML 基本如下

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

Answer 1

在页脚上使用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;
}

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

粘性页脚失败

1 个答案: