css讓一個盒子的高度自適應屏幕剩餘的部分

項目中,移動端要自適應,由於有時候數據不夠,所以導致了有的區域空白

要求:沒有數據的時候能夠充滿屏幕,數據超出屏幕就出現滾動條

做法
1-讓容器高度充滿這個屏幕
在容器內容很少的情況下,要想讓這個容器充滿整個屏幕:

`.container{

min-height:100vh;
display:flex

}`

2-讓容器高度充滿剩餘屏幕高度
要讓容器充滿屏幕的剩餘高度,用 vh 結合 flex 佈局就可以實現。

`.content{

min-height:100vh;
display:flex

}
.header{

height:100px

}
.content{

flex:1

}
.footer{

height:100px

}`

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章