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

232 阅读1分钟

效果图

代码实现

一:flex

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

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

二:直接给footer绝对定位