项目中, 移动端要自适应, 由于有时候数据不够, 所以导致了有的区域空白
要求: 没有数据的时候能够充满屏幕, 数据超出屏幕就出现滚动条
做法
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
- }`
来源: http://www.jianshu.com/p/c67a16f9865f