近期做移动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. 逐步搭建Lamp环境之Linux的运行模式

    首先先来看几个概念,分别是:单用户.单任务.多用户.多任务 单用户: 是指操作系统一般只能由一个人同时进行登录 单任务: 是指操作系统只能同时处理一个任务 多用户: 是指操作系统可以允许由多个用户同时 ...

  2. CSS中line-height与vertical-align

    参考文章: 深入了解CSS的line-height属性 Vertical-Align: 你需要知道的所有事[译] Vertical-Align: All You Need To Know 1.什么是行 ...

  3. Python+Selenium webdriver Api

    # -*- coding: utf-8 -*- from selenium import webdriver browser = webdriver.Firefox() #browser.set_wi ...

  4. applicaitonContext属性未注入, 请在applicationContext.xml中定义SpringContextHolder.

    我用的jeesite框架,在使用定时任务时,出现一些问题,,1.在windows上项目可以在tomcat下,运行2.在linux下项目在tomcatgh下,却出现问题: 15-Dec-2017 15: ...

  5. ASP.NET Core Web API下事件驱动型架构的实现（一）：一个简单的实现

    很长一段时间以来,我都在思考如何在ASP.NET Core的框架下,实现一套完整的事件驱动型架构.这个问题看上去有点大,其实主要目标是为了实现一个基于ASP.NET Core的微服务,它能够非常简单地 ...

  6. idea/eclipse下Maven工程集成web服务(tomcat、jetty)

     idea/eclipse下Maven工程集成web服务 转载请注明出处:http://www.cnblogs.com/funnyzpc/p/8093554.html 应用服务器最常用的一般有这哥仨: ...

  7. Azure: 给 ubuntu 虚机挂载数据盘

    在 azure 上创建的虚机默认会分配两个磁盘,分别是系统盘和一个临时磁盘.如果我们要在系统中安装使用 mysql 等软件,需要再创建并挂载单独的数据盘用来保存数据库文件.这是因为临时磁盘被定义为:用 ...

  8. 开源免费接口管理平台eoLinker AMS开源版 V3.2.0更新，增加批量导出导入接口功能！

    eoLinker是一个免费开源的针对开发人员需求而设计的接口管理工具,通过简单的操作来帮助开发者进行接口文档管理.接口自动化测试.团队协作.数据获取.安全防御监控等功能,降低企业的接口管理成本,提高项 ...

  9. JavaScript 中 this 的详解

    this 的指向 this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑.在实际应用中,this 的指向大致可以分为以下四种情况. 原文作者:林鑫,作者博客:http ...

  10. 破解iframe微信推文（图片）防盗链

    $.ajaxPrefilter(function(options) { if(options.crossDomain && jQuery.support.cors) { var htt ...