css布局-顶部底部固定+中间内容

效果图

代码实现

一：flex

#app{    
    display: flex;    
    flex-direction: column;    
    justify-content: space-between;    
    width: 100%;    
    height: 100vh;    
    overflow: hidden; /* 无法滑动，锁定在一屏 */
}

/* 通常顶部和底部的高度是确定的，当然也可能不确定，但是不影响*/
.content{
   flex:1;
}

二：直接给footer绝对定位