項目中,移動端要自適應,由於有時候數據不夠,所以導致了有的區域空白
要求:沒有數據的時候能夠充滿屏幕,數據超出屏幕就出現滾動條
做法
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
}`