SOURCE

<div class='body'>
    <div class="content">
    内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多内容超多
</div>
<div class="footer">
    底部
</div>
</div>

*{
    padding:0;
    margin: 0;
}
html,body{
    height: 100%;
}
.body{
    display:flex;
    flex-direction:column;
    height: 100%;
}
.content{
    flex: 1;
    padding: 0 20%;
}
.footer{
    height: 1px;
    min-height: 60px;
    line-height: 60px;
    text-align:center;
    flex:0;
    background-color:rgba(255,0,0,0.3);
}