近期做移动app、wap等站,需要头部固定在顶部,不随着内容滚动而滚动
平时第一想法就是使用position:fixed;top:0;z-index:10;这样去实现
但这样使用fixed之后,会在ios系统下,当有input输入框的时候.出现键盘遮盖的问题
为了避免这种情况
则使用flex盒子

-----------------------------------
<div class="wrapper flex flex-v">
<div class="header">我是头部header</div>
<div class="main flex-1">我是中间内容</div>
<div class="footer">我是底部footer</div>
</div>
-----------------------------------
聊聊几行主体结构,上中下布局.无需去写js,无需去应用框架.
无需嵌套很多层结构,也无需很多样式.只需按照之前已经配好的去写俩css样式名即可完美呈现所需效果。
详情demo见附件。
小试牛刀。欢迎拍砖!

下载链接:http://files.cnblogs.com/files/leshao/%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%AE%9E%E7%8E%B0%E5%A4%B4%E9%83%A8%E5%B0%BE%E9%83%A8%E5%9B%BA%E5%AE%9A.rar

多谢@白树等大神的指点

flex盒模型实现头部尾部固定的更多相关文章

  1. flex盒模型 详细解析

    flex盒模型 详细解析 移动端页面布局,采用盒模型布局,效果很好 /* ============================================================    ...

  2. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  3. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  4. CSS3 Flex布局(伸缩布局盒模型)学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  5. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  6. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  7. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  8. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  9. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

随机推荐

  1. 自己动手写http服务器——处理http连接(二)

    关于http报文格式请看这篇文章 //http_conn.h #ifndef HTTPCONNECTION_H #define HTTPCONNECTION_H #include <unistd ...

  2. Struts2入门到放弃

    写在前面------------------------------------------------------------------------- 本文章主要从三个方面来学习Struts2框架 ...

  3. ps的快捷键

    最近学习了一些ps切图,总结一些快捷键,以免自己忘记,总结的不好,也可能不全,忘大牛指点,试着坚持总结 1.工具箱 (多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取) 矩形.椭圆选框工具 ...

  4. 打印杨辉三角 --JS

    var arr = new Array(); for(var i = 0 ;i < 6 ; i++){ if(i == 0){arr.push(1);} else if(i == 1){arr ...

  5. 參与 Spring 4 中文文档翻译

    參与 Spring 4 中文文档翻译 我们从2014年12月開始翻译Spring 4的框架文档.尽管至今已有一年,可是进度非常慢. 当中一部分原因是由于Spring 文档有1000多页,并且翻译的时候 ...

  6. Hibernate中使用@Lob 注解保存String[] 问题

    Hibernate中使用@Lob 注解保存String[] 问题 在Hibernate注解中怎样你想保存一个字段为String数组类型.假设你想尝试保存为clob类型的话,普通情况下为定义为: @En ...

  7. 【Linux探索之旅】第二部分第五课:用户和权限,有权就任性

    内容简单介绍 .第二部分第五课:用户和权限,有权就任性 2.第二部分第六课预告:Nano,刚開始学习的人的文本编辑器 用户和权限.有权就任性 今天的标题也挺任性的啊,虽说小编是一个非常本分的人(真的吗 ...

  8. DNS解析全过程

    浏览器输入一个网址.要訪问该网址必须由DNS解析出相应的server的IP地址. 对于大型站点来说,一个站点相应多台server.那么DNS解析出的可能是进行负载均衡的server的IP地址.DNS解 ...

  9. jQuery 插件 Magnify 开发简介(仿 Windows 照片查看器)

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  10. gulp的基本用法

    这几天简单的研究了一下gulp的用法,gulp对于初学者来说还是很友好的. 官方给出gulp的优点如下: 1.通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理. 2.Gulp 严格 ...