手机app的布局大致上都是头部、内容、底部三部分；

我们需要实现的是头部、底部高度固定；中间内容区域自适应且可以滚动；直接贴代码；

css：

html,body {

        width: 100%;

        height: 100%;

    }

    body {

        margin: 0;

        padding: 0;

        display: flex;

        flex-direction: column;

    }

    section {

        flex: 1;

        overflow-y: scroll;

        overflow-x: hidden;

    }

    header {

        background: indianred;

        width: 100%;

        height: 50px;

    }

    footer {

        background: indigo;

        width: 100%;

        height: 50px;

    }

    p {

        height: 50px;

        width: 100%;

    }

html：

<body>

    <header>头部</header>

    <section>

        <p>这是可以滚动的</p>

        <p>这是可以滚动的</p>

        <p>这是可以滚动的</p>

        <p>这是可以滚动的</p>

        <p>这是可以滚动的</p>

        <p>这是可以滚动的</p>

        <p>这是可以滚动的</p>

        <p>这是可以滚动的</p>

        <p>这是可以滚动的</p>

        <p>这是可以滚动的</p>

    </section>

    <footer>底部</footer>

</body>

效果图：

固比固布局 圣杯布局 css实现传统手机app布局的更多相关文章

  1. CSS布局-圣杯布局

    圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...

  2. CSS经典布局——圣杯布局与双飞翼布局

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

  3. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  4. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  5. css总结3：Flex 布局教程：Flex-demos（转）

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...

  6. 简单而兼容性好的Web自适应高度布局，纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  7. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  8. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  9. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

随机推荐

  1. Rails中关联数据表的添加操作（嵌套表单）

    很早就听说有Web敏捷开发这回事,最近终于闲了下来,可以利用业余的时间学些新东西,入眼的第一个东东自然是Ruby on Rails.Rails中的核心要素也就是MVC.ORM这些了,因此关于Rails ...

  2. UESTC--1269--ZhangYu Speech（模拟）

    ZhangYu Speech Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit ...

  3. 转：centos下升级git版本的操作记录

    https://www.cnblogs.com/kevingrace/p/8252517.html 在使用git pull.git push.git clone的时候,或者在使用jenkins发版的时 ...

  4. JavaScript：让你彻底弄清offset

    ylbtech-JavaScript:让你彻底弄清offset 1.返回顶部 1. 很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张 ...

  5. ROS集成开发环境RoboWare Studio安装教程

    前言:很多人说vim是最快的,所以我选择用roboware. ROS 自带的编辑器vim增加插件,效果如下: RoboWare Studio,效果如下: 下面开始安装. 一.安装 去官网 http:/ ...

  6. Broadcast Receiver广播接收器

    1.概述 广播接收器不仅能接受来自系统的内容,也可以接受来自其他app的内容.广播分为标准广播和有序广播. 2.标准广播 一种完全异步执行的广播,在广播发出之后几乎所有的广播接收器都在同一时刻接受到广 ...

  7. mvel2.0语法指南

    虽然mvel吸收了大量的java语法,但作为一个表达式语言,还是有着很多重要的不同之处,以达到更高的效率,比如:mvel像正则表达式一样,有直接支持集合.数组和字符串匹配的操作符. 除了表达式语言外, ...

  8. jsp错误页面的处理

    局部的错误处理 1,errorpage 在错误页面指令page中声明errorpage="要显示的页面地址" 在要显示的页面page中声明iserrorpage="tru ...

  9. npm run eject 命令后出现This git repository has untracked files or uncommitted changes错误

    npm run eject 暴露隐藏的文件,不可逆 结果出现下面的问题 This git repository has untracked files or uncommitted changes: ...

  10. CF 689D - Friends and Subsequences

    689D - Friends and Subsequences 题意: 大致跟之前题目一样,用ST表维护a[]区间max,b[]区间min,找出多少对(l,r)使得maxa(l,r) == minb( ...