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>