2

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

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

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>
4

1 回答 1

3

在页脚上使用规则，在标签上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;
}​

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

于 2012-09-04T21:18:26.507 回答