根据内容粘贴页脚底部答案

【问题标题】：Stick Footer bottom of the page depending of content根据内容粘贴页脚底部
【发布时间】：2016-07-11 00:57:21
【问题描述】：

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

当内容不够时，我希望它贴在页面底部，如果内容占屏幕高度的 100% 以上，我希望它位于内容的底部。问题是我尝试了很多使用 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;
 }

【问题讨论】：

标签： css footer sticky-footer

【解决方案1】：

你可能想发现这个pen很有用

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

【讨论】：

是的，但它会覆盖内容。我希望它在内容底部时停止以获得相对位置。

【解决方案2】：

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

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

在我的情况下，填充是底部 50 像素。之后，页脚的高度等于填充。

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

看我自己的例子website

谢谢

【讨论】：