手机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. hmm CDN检测

    # -*- coding:utf-8 -*- import sys import re from hmmlearn import hmm import numpy as np from sklearn ...

  2. [jzoj 6080] [GDOI2019模拟2019.3.23] IOer 解题报告 (数学构造)

    题目链接: https://jzoj.net/senior/#main/show/6080 题目: 题意: 给定$n,m,u,v$ 设$t_i=ui+v$ 求$\sum_{k_1+k_2+...+k_ ...

  3. 13. Roman to Integer[E]罗马数字转整数

    题目 Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from ...

  4. 百度ai和图灵123实现简单的语音对话

    百度ai和图灵123实现简单的语音对话

  5. ffmpeg键盘命令响应程序详解

    一.对终端进行读写 当一个程序在命令提示符中被调用时, shell负责将标准输入和标准输出流连接到你的程序, 实现程序与用户间的交互.   1. 标准模式和非标准模式 在默认情况下, 只有用户按下回车 ...

  6. form&input

    <form action="http://www.baidu.com" method="post" autocomplete="on" ...

  7. SQL Server的复合索引学习【转载】

      概要什么是单一索引,什么又是复合索引呢? 何时新建复合索引,复合索引又需要注意些什么呢?本篇文章主要是对网上一些讨论的总结. 一.概念 单一索引是指索引列为一列的情况,即新建索引的语句只实施在一列 ...

  8. NSRunloop总结

    NSRunloop是一个消息处理机制:是一个循环. 系统通过消息队列和runloop与进程(线程)通信. runloop是一个机制和体系结构. 它包含以下几个方面: 1.事件源管理: 2.事件的检索与 ...

  9. Python基础数据类型list，tuple

    列表是有序的可变的元素集合.列表中的每个元素可以使任何数据类型,包括列表本身. 列表生成 Python3中的列表通过定义,for循环,列表推导式等几种方式生成 定义 直接通过中括号`[]`定义一个列表 ...

  10. TensorFlow+实战Google深度学习框架学习笔记（6）----神经网络经典损失函数

    1.分类问题(交叉熵): (1)模型: (2)代码1: 其中,tf.clip_by_value是将一个张量的数值限制在一个范围之内,若小于1e-10则赋值为1e-10,若大于1.0则赋值为1,这样避免 ...