移動(dòng)開(kāi)發(fā)中固定布局

XFLY 發(fā)布于2019-08-23 14:03 / 2826人閱讀

摘要：記錄一下移動(dòng)開(kāi)發(fā)過(guò)程中出現(xiàn)的問(wèn)題。若是涉及到移動(dòng)開(kāi)發(fā)布局中碰到固定某一部分，其余部分可滾動(dòng)，盡量不要使用可用替代，若是不需要考慮兼容性，用更佳。

記錄一下移動(dòng)開(kāi)發(fā)過(guò)程中出現(xiàn)的問(wèn)題。
從最常見(jiàn)的布局說(shuō)起，固定頭部或底部算是最常見(jiàn)的需求了
假定頁(yè)面布局如下：

實(shí)現(xiàn)頭部、底部固定，中間滾動(dòng)，有三種簡(jiǎn)單實(shí)現(xiàn)方式：

fixed布局

absolute布局

flex布局

先從最簡(jiǎn)單的fixed布局開(kāi)始，實(shí)現(xiàn)方式如下：

        html, body {
            overflow: hidden;
            height: 100%;
        }
        .header, .footer {
            position: fixed;
            left: 0;
            height: 50px;
        }
        .header {
            top: 0;
        }
        .footer {
            bottom: 0;
        }
        .main {
            height: 100%;
            padding: 50px 0;
        }

這種布局在大多數(shù)情況下是正常顯示的，但在移動(dòng)端上（iOS）position: fixed失效，會(huì)有所謂的兼容性問(wèn)題；

第二種方式absolute實(shí)現(xiàn)如下：

    html, body {
            position: relative;
            height: 100%;
        }
        .header, .footer {
            position: absolute;
            left: 0;
            width: 100%;
            height: 50px;
        }
        .header {
            top: 0;
        }
        .footer {
            bottom: 0;
        }
        .main {
            height: 100%;
            width: 100%;
            padding: 50px 0;
            overflow: auto;
        }

這種方式在移動(dòng)端（iOS）上能準(zhǔn)確布局

第三種方式flex布局如下：

        body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header, .footer {
            height: 50px;
        }
        .main {
            flex: 1;
            overflow: auto;
            -webkit-overflow-scrolling:  touch; /*ios滾動(dòng)流暢*/ 
        }

flex 定位在移動(dòng)端兼容到了 iOS 7.1+，Android 4.4+,在iOS3.2~ios6.0可兼容flexbox，如果使用 autoprefixer 等工具還可以降級(jí)為舊版本的 flexbox ，可以兼容到 iOS 3.2 和 Android 2.1。

若是涉及到移動(dòng)開(kāi)發(fā)布局中碰到固定某一部分，其余部分可滾動(dòng)，盡量不要使用position: fixed,可用absolute替代，若是不需要考慮兼容性，用flex更佳。