CSS 实现完美底部

实现效果：

当内容较多时，底部自动往下移。

css代码

html,body{
    height: 100%;
}
.container{
    min-height: 100%;
    margin-bottom: -50px;
    background-color: #fff;
}
.footer{
    background-color: #3884ff;
    text-align: center;
    line-height: 50px;
    color: #fff;
}
.container::after{
    content: '';
    display: block;
}
.footer,.container::after{
    height: 50px;
}
.container p{
    line-height: 50px;
}

html代码：

<div class="container">
    <p>我是内容</p>
    <p>我是内容</p>
</div>
<footer class="footer">
    我是底部
</footer>