Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
In the project, moving to end adaptive, because the data is sometimes not enough, resulting in a blank area of some
Requirements: No time to be able to fill the screen data, data beyond the scroll bar appears on the screen
practice
1- to raise the height of the container filled with the screen
in rare cases the container contents, to get this container to fill the screen:
`.container{
min-height:100vh;
display:flex
}`
2- Let the remaining height of the container is full screen height
remaining to make the height of the container fills the screen, combined with a flex vh layout can be achieved.
`.content{
min-height:100vh;
display:flex
}
.header{
height:100px
}
.content{
flex:1
}
.footer{
height:100px
}`