css - 在页面底部设置页脚

Question

我的网站有不同大小的页面

如何设置页脚始终在页面底部？

请注意我需要它在页面底部而不是屏幕底部，所以如果我有短屏幕，它将在它的底部，如果我有长屏幕，滚动页面我'只有向下滚动才能看到页脚。

谢谢

<footer>
    <?PHP include "footer.php"; ?>
</footer>

CSS:

footer {
    background: #294a2d; 
    width:100%;
    height: 180px; 
    color: #fff;
    margin-top: 50px;
}

Answer 1

您可以在页脚上使用 position:absolute;，在 body 标签上使用 min-height，如下所示:

FIDDLE <-- 内容很少<强> FIDDLE <-- 有很多内容

HTML:

<div>... Content ...</div>
<footer>... Footer ...</footer>

CSS:

   html{
    height:100%;
    width:100%;
    margin:0;
}
body {
    width:100%;
    min-height:100%;
    margin:0;
    position:relative;
}
div {
    padding-bottom:100px;
}
footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
    background:gold;
}