Question

您好，我希望页脚始终位于页面底部。如果我使用：

#footer {
   position:fixed;
   bottom:0
}

我得到一个与我的内容div重叠的页脚（如果它变长）。那么，即使我在上面的div中没有足够的内容，有没有办法在页面底部找到页脚？如果内容div缩短，就像扩展div一样？我知道以前一定要问过这个问题，但我找不到合适的答案。

谢谢！

编辑：

我可能不太清楚，

现在我的网站看起来像这样：

enter image description here

页脚下面有空格，我不想要。

我希望它是这样的：

enter image description here

底部的页脚，但如果我使用您提供的代码，那么当我有更多内容时，我会遇到问题。

因此，当我有更多内容时，我希望我的页脚在第一张图片中表现得像这样：

enter image description here

这样我的内容就会压低页脚。

谢谢！：）

Answer 1

使用宽度：100％/高度：100％作为样式。

Answer 2

制作如下布局：

<html>
<head><title>Your Title</title></head>
<body>
REST OF BODY
<footer>HERE THE FOOTER</footer>
</body>
</html>

现在，页脚将位于页面底部

和css：

footer {
            width: 100%;
            bottom: 0;
            position: fixed;
        }

Answer 3

检查 Demo jsFiddle

CSS

div#footer{
    width:100%;
    height :100%
    position:fixed;
    color:#fff;
    text-align:center;
    background-color:#333;
    padding:7px 0 7px 0;
    font-size:16px;
    border-top:2px solid #CC0000;
    font-family:Courier;
    margin:-5px auto -2px auto;
    z-index:9999;   
    bottom:0;
}
div#footer a{
    color:#ef3939;
    text-decoration:underline;
}

希望这对你有帮助！

使页脚停留在底部

3 个答案:

CSS