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;
}

对于我的情况，填充是50px底部。之后，页脚的高度等于填充。

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

查看我自己website

上的示例

谢谢

根据内容粘贴页面底部

2 个答案: