移动开发中固定布局

墨白

记录一下移动开发过程中出现的问题。
从最常见的布局说起,固定头部或底部算是最常见的需求了
假定页面布局如下:

    <body>
        <div class="header"></div>
        <div class="main"></div>
        <div class="footer"></div>
    </body>

实现头部、底部固定,中间滚动,有三种简单实现方式:

  1. fixed布局
  2. absolute布局
  3. flex布局

先从最简单的fixed布局开始,实现方式如下:

        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;
        }

这种布局在大多数情况下是正常显示的,但在移动端上(iOS)position: fixed失效,会有所谓的兼容性问题;


第二种方式absolute实现如下:

    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;
        }

这种方式在移动端(iOS)上能准确布局


第三种方式flex布局如下:

        body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header, .footer {
            height: 50px;
        }
        .main {
            flex: 1;
            overflow: auto;
            -webkit-overflow-scrolling:  touch; /*ios滚动流畅*/ 
        }

flex 定位在移动端兼容到了 iOS 7.1+,Android 4.4+,在iOS3.2~ios6.0可兼容flexbox,如果使用 autoprefixer 等工具还可以降级为旧版本的 flexbox ,可以兼容到 iOS 3.2 和 Android 2.1。


若是涉及到移动开发布局中碰到固定某一部分,其余部分可滚动,尽量不要使用position: fixed,可用absolute替代,若是不需要考虑兼容性,用flex更佳。

阅读 1.3k

菜鸟一个

80 声望
0 粉丝
0 条评论

菜鸟一个

80 声望
0 粉丝
文章目录
宣传栏