在底部放置页脚

Question

我正在尝试将页脚放在页面底部，而不是粘在页面底部。我将底部设置为 0px，但是当页面太长时，我的页脚停留在顶部而不是页面底部。此外，我的页脚一直坚持使用我的徽标，而不是位于页面底部。我应该怎么做才能解决这个问题？

这是一个例子 CSS

.logo {
    display: block;
    z-index: 20;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

footer {
    width: 100%;
    background: rgba(0,0,0,0.6);
    bottom: 0;  
}

HTML

    <footer class="footer">
        <div class="container text-center">
            <h4>Follow Us On Social Media!</h4>
            <a href="#"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a>
            <a href="#"><i class="fa fa-twitter-square fa-3x"></i></a>
            <a href="#"><i class="fa fa-google-plus-square fa-3x"></i></a>
            <a href="#"><i class="fa fa-instagram fa-3x" aria-hidden="true"></i></a>
        </div><!--End container-->
    </footer><!--End footer 2-->

感谢您的帮助！

Answer 1

将位置相对属性添加到html标签，将绝对位置添加到页脚，如下所示，页脚将始终位于页面内容的底部。

html {
  min-height:100%;
  position:relative;
}

.logo {
    display: block;
    z-index: 20;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

.footer {
    width: 100%;
    background: rgba(0,0,0,0.6);
    position:absolute;
    bottom: 0;  
}

Check this Jsfiddle for reference