根据内容在页面底部粘贴页脚

Question

我这里有一个页脚http://codepen.io/anon/pen/EKmXMR

并且我希望它在内容不够时停留在页面底部，如果内容占据屏幕高度的 100% 以上，我希望它位于内容底部.问题是我尝试了很多 "Sticky Footer" 解决方案 CSS3 就像这里的绝对位置 http://cbracco.me/cs...-footer-effect/ 但它对我不起作用。

你知道这是怎么回事吗？

.footer{
width:100%;
height: 50px;
text-align:center;
/*position:absolute;*/
color: white;
z-index: 2;
/*bottom: 0;
right:0;
left:0;*/
background-color:black;
line-height:50px;
}
 .footer a {
 color: inherit;
 text-decoration: none;
 }

Answer 1

您可能想发现这个 pen 有用

.footer {
 position: fixed;
 width:100%;
 height:50px;
 bottom: 0px;
 }

Answer 2

我找到的一个解决方案是向包装器（页面）添加填充：

.wrapper{
    min-height: 100%;
    padding: 0 0 50px;
    float: left;
    position: relative;
    box-sizing: border-box;
}

对于我的情况，填充底部为 50 像素。之后页脚的高度等于padding。

.footer{
    width: 100%;
    height: 50px;
    text-align: center;
    position: absolute;
    color: white;
    bottom: 0;
    left: 0;
    background-color: black;
    line-height: 50px;
}

看我自己的例子website

谢谢

根据内容在页面底部粘贴页脚

Stick Footer bottom of the page depending of content

css

footer

sticky-footer