flex/fixed上中下（移動端）

方案一：不使用fixed

html{
    height:100vh;
    /* 如果這裏不給100%，那就會認為自動，那底部欄就跑到最下面了（視口外） */
    font-size:26.667vw;
    /* 
       100vw=375px    1px=0.26667vw    
       為方便計算所以設定font-size為100px，也就是26.667vw 
       為了實現跟隨屏幕改變，所以這裏用的vw基准，而不是固定的px
    */
}
body{
    width:100%;
    height:100%;
    /* 如果這裏不給100%（父高100%），那就會認為自動，那底部欄就跑到最下面了（視口外） */
    display: flex;
    font-size: 0.16rem;
    flex-direction: column;
}
header{
    height:.67rem;
    /* 測得67px就是 67/(html的font-size)=67/100=0.67rem */
}
main{
    flex:1;
    overflow:auto;
}
footer{
    height:.5rem;
}

方案二：使用fixed

html{
    height:100vh;
    /* 如果這裏不給100%，那就會認為自動，那底部欄就跑到最下面了（視口外） */
    font-size:26.667vw;
    /* 
       100vw=375px    1px=0.26667vw    
       為方便計算所以設定font-size為100px，也就是26.667vw 
       為了實現跟隨屏幕改變，所以這裏用的vw基准，而不是固定的px
    */
}
body{
    width:100%;
    height:100%;
    /* 如果這裏不給100%（父高100%），那就會認為自動，那底部欄就跑到最下面了（視口外） */
    font-size: 0.16rem;
}
header{
    height:.67rem;
    /* 測得67px就是 67/(html的font-size)=67/100=0.67rem */
    positon:fixed;
    left:0;
    bottom:0;
}
main{
    overflow:auto;
    padding-top:0.67rem;
    /* 由於header固定了，脫離文檔流，所以這裏往下擠一下才能顯示main的原被header遮掩的部分內容 */
    padding-bottom:.5rem;
    /* 對應footer的高度，避免被底部遮掩，向上擠一下 */
}
footer{
    height:.5rem;
    positon:fixed;
    left:0;
    bottom:0;
}