移动开发中固定布局

tzshlyt 2019-06-29

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

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

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

fixed布局
absolute布局
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更佳。

: tzshlyt

相关推荐

移动前端开发和Web前端开发的区别是什么？

前端这门技术，从诞生发展至今不过寥寥十余年。如果说前十年是 PC 前端的时代，那后十年一定是属于移动前端的时代。特别是随着网络制式的发展，移动设备在全球范围内得到了空前的普及，在前端领域，Hybird Web、React Native、Weex、Flutt

PncLogon 0喜欢 / 0评论 2020-09-24

移动APP开发有哪些框架？

现在比较流行的移动APP开发框架有以下六种：网页、混合、不仅、原生、桥接、自绘。前三种体验与Web的体验相似，后三种与原生APP的体验相似。这六种框架形式，都有自己适用的范围。无所谓好坏，适用就是好。自绘应用适用于游戏和有特殊效果的应用，最大的好处是没有平

wwzaqw 0喜欢 / 0评论 2020-09-04

原生开发、H5开发、混合移动开发的优缺点

原生开发，是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。

Terminator0 0喜欢 / 0评论 2020-06-21

移动开发音乐播放器

<?xml version="1.0" encoding="utf-8"?>. <ImageView. android:id="@+id/cover". android:src=

csdnuuu 0喜欢 / 0评论 2020-04-18

.NET(c#) 移动APP开发平台 - Smobiler平台介绍

　类似开发WinForm的方式，使用C#开发Android和IOS的移动应用？听起来感觉不可思议，但是实际上确实很强大，那么Smobiler平台到底是如何实现的呢，这里给大家介绍一下。　　IOS对应苹果客户端，Android对应安卓客户端，内测版本是代表还

xilove0 0喜欢 / 0评论 2020-02-11

移动Web开发字体格式选择

在做移动开发的时候，UI设计师会提供一些定制字体，来提高产品的视觉效果。对于前端开发来说，就需要考虑字体文件的兼容性和文件的大小，在尽量保证UI效果的情况下，兼容更多的浏览器，减少资源体积，使UI效果、兼容性、性能三者达到平衡。由于中文字体字符集的限制，最

ShylaDong 0喜欢 / 0评论 2020-01-04

移动web开发之像素和DPR详解

关于这些问题，可能就不清楚了。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。

福叔 0喜欢 / 0评论 2019-12-24

《移动WEB前端高级开发实践@www.java1234.com》——3

Flux将一个应用分成四个部分。Flux 的最大特点，就是数据的"单向流动"。Fspring由劲度系数产生的力，Fdamper由阻尼产生的力。所有注册到 raf 中的回调，浏览器会统一管理，在适当的时候一同执行所有回调。而界面的变化无

haohong 0喜欢 / 0评论 2019-12-19

web前端学习资料收集

"30天教你学 HTML 和 CSS"，免费的课程视频，一天一个，让你30天学会 HTML 、 CSS。简单、全面的指南可以帮助新手在学习 HTML 和 CSS 的时候打下好的基础。HTML & CSS的基础知识、前端设计和开发

huanghuang 0喜欢 / 0评论 2014-04-11

Windows下PhoneGap移动开发环境搭建-Android

安装android的开发环境并配置环境变量。使用PhoneGap命令创建PhoneGap项目。将上述项目导入ADT进行后续开发。其中my-app为你想要使用的项目名称。这是两个命令，第一个将当前目录进入到你创建的目录中。启动ADT中的eclipse，然后选

yxwang0 0喜欢 / 0评论 2014-01-09

移动开发中的 Web：WebView、Web 优化、热修复、跨平台……

移动开发领域近年来已经逐渐告别了野蛮生长的时期，进入了相对成熟的时代。而一直以来 Native 和 Web 的争论从未停止，通过开发者孜孜不倦的努力，Web 的效率和 Native 的体验也一直在寻求着平衡。本文聚焦 iOS 开发和 Web 开发的交叉点，

qixiang0 0喜欢 / 0评论 2019-08-24

移动电商APP开发，需要注意哪些细节？千联信息

snjezana 0喜欢 / 0评论 2019-10-21

移动开发：Android 错误警告信息解释

targetSdkVersion如果设置很低，就等于是关闭了所有高版本的新特性和机制，包括『屏幕自适应』、『硬件加速』。为了保证各个版本的兼容性，及时使用到新特性，targetSdkVersion因随Android最新版本的发布而持续提高，以保证在各个An

shangbolei 0喜欢 / 0评论 2015-01-16

如何选择适合的移动开发应用程序

移动应用程序不再是可有可无,而是必不可少。你需要一款移动应用程序,但又该从哪里入手呢?下面的内容主要是讲述三个移动开发应用程序，以便小伙伴们选择做个参考：原生、HTML5或混合：。在如今越来越社交化、开放化的环境下，移动应用程序扮演着至关重要的角色，而且将

lanyanai 0喜欢 / 0评论 2015-01-13

移动跨平台的10大跨平台工具

HTML5应用开发的大热让众多跨平台开发框架逐渐风行，而Sencha Touch就是其中之一。Sencha Touch对于iOS平台的兼容性非常好，画面切换效果亦是相当流畅。Titanium最大的特点就是，由于是基于硬件的开发，开发过程中所创建的应用可选择

朱莉的乔夫 0喜欢 / 0评论 2015-03-13

xcode快捷键-ios开发常用

下面是iOS开发人员使用Xcode进行开发iOS APP的常用快捷键分享。control + L :将光标插点置于窗口正中。

qixiang0 0喜欢 / 0评论 2015-03-11

移动App开发需要更多的PaaS平台而不是IaaS

时代的变迁，创业的大潮，越来越多的人关注了有点开发，越来越多的人了解了互联网服务术语：PaaS、IaaS、SaaS、BaaS等。今天大家在开发App的时候这么多复杂的云服务如何来选择呢？例如客服领域Udesk、美恰、智齿、逸创云客服等均提供移动SDK以AP

木鲸鱼 0喜欢 / 0评论 2016-01-14

移动开发者们，是时候使用HTML5了！

Html5喊了好多年了，至今仍没有被大规模的使用。依然记得2012年参加HTML5梦工厂去了好多人，当时天真的以为，Html5真的开始流行起来了，于是就在会场卖书的地方买了本Html5的书来学。后来，大家知道的，Html5都是不温不火，但是我却没有减少对其

zZoOoOJaVa 0喜欢 / 0评论 2015-07-16

移动前端开发

作用：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；device-width自动适应。是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；也是iphone的私有标签，它指定的

starleejay 0喜欢 / 0评论 2015-10-26

移动web页面前端开发总结

移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，基于Webkit内核，可使用Chrome浏览器调试即可。

无名大强在前端 0喜欢 / 0评论 2016-05-03

HBuild 初体验（国内最牛的开发工具)

2016年年初以来，明显感觉到了移动的开发人员过剩，移动项目几乎没有，尤其是同程对前端技术的带动，迫使我们不得不去转型。让移动开发人员学习前端技术，学习H5.目的就是将来用H5开发APP应用，这样也可以节约成本。而外包项目，任务紧，时间短，用H5开发风险太

bluemengcom 0喜欢 / 0评论 2016-11-22

Flutter与React Native针对移动开发的比较

现如今，业界的开发人员普遍开始使用Flutter和React Native之类新的框架，来开发各种移动应用程序了。这些新生的框架不但能够使得应用程序的编写过程更为容易，而且能够给用户带来更多的跨平台功能，并且能够支持横跨不同域的开发。而作为对比，Reac

袅袅青烟散 0喜欢 / 0评论 2019-08-29

移动开发必知必会的六大数据统计平台（入门篇）(转)

数据统计对于各位移动开发的童鞋并不陌生，小到Bug统计，大到数据分析，一款性能稳定、用户体验良好的APP一定离不开数据统计的支持，为此我将给大家科普一下常用的六大数据统计平台。友盟+支持移动应用统计和分析流量来源、内容使用、用户属性和行为数据，以便运维人员

zengrunxiu 0喜欢 / 0评论 2019-02-21

2018年在Java、Web和移动开发方面最值得关注的12大开源框架

春节即将来临，许多开发者们已经做好了新一年的学习计划，假如你还没有计划好2018年，可以看下这一篇文章，在这篇文章中，我将分享一些值得开发者学习的优秀框架，以提高他们在移动开发、Web 开发以及大数据方面的开发技能。这是一个Java框架，我已经把它加入到我

数据中心运维管理 0喜欢 / 0评论 2019-06-30

Bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师MarkOtto和JacobThornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0。Bootstrap是最受欢迎的HTM

bingkingboy 0喜欢 / 0评论 2016-03-24

「前端早读君006」移动开发必备：那些玩转H5的小技巧

今日励志语录有志者自有千计万计，无志者只感千难万难。这是空间5.0预约页第二版，使用了以上的若干方法论，例如loading动画，CSS3动画，SVG星空连线，首屏星球重力感应，音

newstudent0 0喜欢 / 0评论 2019-06-30

「移动开发」iuap mobile玩转前端自动化构建

提起iuapmobile studio，相信大家已经不再陌生了，是进行移动应用开发的强大集成工具与必备神器。借助强大的iuap mobile studio，可以实现对开发、测试、调试、打包、发布全程管理。同时iuap mobile studio又是一个极具

WinerChopin 0喜欢 / 0评论 2019-06-30

浅析企业移动化诉求与开发者之间的矛盾

一个时代的进步与发展往往会衍生出新的问题，进而反复循环，使人类文明不断地迭代与升级。这就直接导致开发者在开发app的过程当中会遇到各种各样的屏幕，开发者需要不停的去为这些屏幕做适配。手机厂商生产手机过程当中，通常会对标准操作系统有各式各样的定制、差异化的改

herionliu 0喜欢 / 0评论 2019-06-30

让移动开发更轻松闲鱼基于Flutter构建跨端APP应用实践

Flutter是一款由Google开发的开源、跨平台的移动端开发框架，使用Flutter开发出的应用符合不同平台的原生体验，可以让应用看起来跟系统更加协调。如何基于Flutter高效构建跨端APP？Flutter是一个全新的移动UI框架，它允许使用同一个代

SemiraChen 0喜欢 / 0评论 2019-06-30

基于MARS的移动APP网络通信开发实践

Mars简介MARS作为优秀的跨平台网络层通信方案开源1年多了，github上收获过万的star，期间较为稳定更新并不频繁。基于内核socket MARS针对弱网络环境下的移动应用做了很多比较实用的优化，详细的优化点和原理在其开源项目的wiki里有很多文档

welldum 0喜欢 / 0评论 2019-06-28

HBuild 初体验（国内最牛的开发工具)

2016年年初以来，明显感觉到了移动的开发人员过剩，移动项目几乎没有，尤其是同程对前端技术的带动，迫使我们不得不去转型。让移动开发人员学习前端技术，学习H5.目的就是将来用H5开发APP应用，这样也可以节约成本。而外包项目，任务紧，时间短，用H5开发风险太

huanghuang 0喜欢 / 0评论 2016-11-22

s移动web开发调试方案 -- 适配mobx的真机无线调试

移动web开发，并非是HybirdApp的套壳开发，所以，不想大张旗鼓地用数据线 + usb开发调试工具来调试，只是开发可以在手机浏览器中运行地可以调用localStorage的webApp即可。本次开发使用的技术组合是：React + mobx + Re

sunling 0喜欢 / 0评论 2019-06-28

从写博客到出书 ——《ionic移动开发入门与实战》

在16年的时候，我打算找个平台写点博客，选了几家之后发现简书页面很简洁，而且搜索排名很靠前，最终就选定在简书写博客。一开始也没指望有人看，纯粹是当练习 markdown 自己写点笔记，方便自己查阅。在之后断断续续写了一些 iOS 的博客，更新频率不高，看的

nickking 0喜欢 / 0评论 2019-06-28

移动前端开发之viewport的深入理解

移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨

qianxiaona 0喜欢 / 0评论 2016-07-20

移动前端开发经验小结

}不过，在 Android Browser2.* 上，这个定义将会失效，而显示为默认的矩形。}如果你觉得这样定义不够灵活，想懒一点，那么其实可以给 border-radius 预设一个比较大的值，比如 100rem，用以避免当元素的尺寸变了，圆角半径也得跟

WEB前端娃steiny 0喜欢 / 0评论 2019-06-28

移动web页面前端开发总结

移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，基于Webkit内核，可使用Chrome浏览器调试即可。

WinerChopin 0喜欢 / 0评论 2016-05-03

java发展方向和Google架构分析

大表分成许多小块，然后由许多服务器计算，分类，整合，再统计。它分为三维，Rows,Cols,和TimeStamps(时间)；移动设备的瓶颈是：用户体验！为什么最重要的图片没有传上来？

云服务器探讨 0喜欢 / 0评论 2011-10-09

移动前端开发

作用：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；device-width自动适应。是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；也是iphone的私有标签，它指定的

WinerChopin 0喜欢 / 0评论 2015-10-26

HTML5移动开发概述

1.native+html5=？Native Mobile App/Desktop App<-API->Business Logic

HTML混合APP开发 0喜欢 / 0评论 2015-09-03

移动开发者们，是时候使用HTML5了！

Html5喊了好多年了，至今仍没有被大规模的使用。依然记得2012年参加HTML5梦工厂去了好多人，当时天真的以为，Html5真的开始流行起来了，于是就在会场卖书的地方买了本Html5的书来学。后来，大家知道的，Html5都是不温不火，但是我却没有减少对其

勤能补拙孰能生巧 0喜欢 / 0评论 2015-07-16

看看国外的phonegap和ionic移动app开发框架有多火

基于phonegap 以及angularjs 的移动app html5开发框架Ionic 的日访问量ip:492000. 大家都懂的，下面给大家简单介绍一下 phonegap Angularjs ionic 懂的可以不看。PhoneGap是一个用基于H

acntw 0喜欢 / 0评论 2015-06-14

移动WebApp开发 JS框架对比

1 目的本次评比的目标是以移动Web App开发为基础的JS框架，会有意的排除部分不适用于移动Web App开发的JS框架，如 jQuery、ExtJS等。Sencha Touch自带XTemplate模版引擎，完美的应用在组件渲染中；Javascript

itSeven 0喜欢 / 0评论 2015-06-11

基于html5开发中点击事件在移动端的问题总结

还有一种方式也可以使用zepto.js中的tap事件来解决。

zjnig的信息仓库 0喜欢 / 0评论 2015-05-21

戏说移动江湖开发历程

后续按照大技术块各个技术点深入浅出的分享出来，请订阅关注。本文阅读需要8分钟。我理解的技术开发人员，除了业务和技术的热爱，其同时也需具备独立思考的能力。统一和分化期在公司第3年以后；其中统一和分化期有可能多次迭代进行。

小菜猿 0喜欢 / 0评论 2019-06-27

云如何让App开发更简单？

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~互联网“下半场”，移动App开发对于质量、速度的要求更加苛刻。4月初，腾讯云正式上线移动开发平台MobileLine，借助腾讯在移动应用开发领域的成熟积累，帮助移动开发者低成本、快速的构建弹性、高质

ccnyou 0喜欢 / 0评论 2019-06-27

预料之中：2015年网页设计的10大趋势

2014快结束了，是我们回顾这一年，并且展望新的2015年的时候了。在2014年我们见证了最重要的设计趋势:响应式设计。这篇文章我们将预测2015年的web设计新趋势，看看在2015年这些趋势将是如何进入我们视野的。可以500%提高开发效率的前端UI框架！

TomKao 0喜欢 / 0评论 2014-10-14

《阿里巴巴Android开发手册》正式发布，献给移动开发者的新年礼物

春节余味尚未消，我们为移动开发者准备了一份迟到的新年礼物——《阿里巴巴Android开发手册》，继《阿里巴巴Java开发手册》之后，阿里巴巴开发规范家族又添一丁，「阿里巴巴Android开发规范」认证考试也同步上线。本手册以开发者为中心视角分为Java语言

Jemy杰 0喜欢 / 0评论 2019-06-26

web前端学习资料收集

"30天教你学 HTML 和 CSS"，免费的课程视频，一天一个，让你30天学会 HTML 、 CSS。你只需要每天花上十多分钟观看，便可轻松学习。网站也提供相应的学习资料下载。简单、全面的指南可以帮助新手在学习 HTML 和 CSS

汤姆猴 0喜欢 / 0评论 2014-04-11

移动开发在路上-- IOS移动开发系列多线程一 [转]

类似于什么是进程什么是线程在这里我就不多浪费时间了！废话不多说先上图，我相信大家都是喜欢看图的人，俗话说得好，求图求真相吗？虽然这里只有屌丝一个但是真相还是会有的。。。

dongruanlong 0喜欢 / 0评论 2014-03-30