Flex/fixed upper, middle and lower (mobile end)

Scheme 1 ： Don't use fixed

html{
    height:100vh;
    /*  If you don't give here 100%, That would be automatic , Then the bottom column goes to the bottom （ Out of viewport ） */
    font-size:26.667vw;
    /* 
       100vw=375px    1px=0.26667vw    
        For the convenience of calculation, set font-size by 100px, That is to say 26.667vw 
        In order to follow the screen changes , So it's used here vw The benchmark , Not fixed px
    */
}
body{
    width:100%;
    height:100%;
    /*  If you don't give here 100%（ Father height 100%）, That would be automatic , Then the bottom column goes to the bottom （ Out of viewport ） */
    display: flex;
    font-size: 0.16rem;
    flex-direction: column;
}
header{
    height:.67rem;
    /*  Measured 67px Namely  67/(html Of font-size)=67/100=0.67rem */
}
main{
    flex:1;
    overflow:auto;
}
footer{
    height:.5rem;
}

Option two ： Use fixed

html{
    height:100vh;
    /*  If you don't give here 100%, That would be automatic , Then the bottom column goes to the bottom （ Out of viewport ） */
    font-size:26.667vw;
    /* 
       100vw=375px    1px=0.26667vw    
        For the convenience of calculation, set font-size by 100px, That is to say 26.667vw 
        In order to follow the screen changes , So it's used here vw The benchmark , Not fixed px
    */
}
body{
    width:100%;
    height:100%;
    /*  If you don't give here 100%（ Father height 100%）, That would be automatic , Then the bottom column goes to the bottom （ Out of viewport ） */
    font-size: 0.16rem;
}
header{
    height:.67rem;
    /*  Measured 67px Namely  67/(html Of font-size)=67/100=0.67rem */
    positon:fixed;
    left:0;
    bottom:0;
}
main{
    overflow:auto;
    padding-top:0.67rem;
    /*  because header Fixed , Off stream , So we can only show it by squeezing down here main Original quilt of header Part of the cover up  */
    padding-bottom:.5rem;
    /*  Corresponding footer Height , Avoid being obscured by the bottom , Squeeze up  */
}
footer{
    height:.5rem;
    positon:fixed;
    left:0;
    bottom:0;
}