1、头部和底部固定，中间内容滚动，不涉及fixed

1)absolute与height:100%

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
　　<title></title>
　　<style>
　　　　html{height: 100%;}
　　　　body{padding:0px;margin:0px;overflow: hidden;height: 100%;}
　　　　header{height: 50px;line-height: 50px;background: red;text-align: center;}
　　　　section{height: 100%;overflow-y: auto;}
　　　　.content{padding-bottom: 100px;}
　　　　footer{height: 50px;line-height: 50px;background: red;position: absolute;width: 100%;bottom: 0px;text-align: center;}
　　</style>
</head>
<body>
　　<header>我是头部</header>
　　<section>
　　　　<div class="content"></div>
　　</section>
　　<footer>我是底部</footer>
</body>
</html>

2) flex与 height: 100vh

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body {
　　margin: 0px;
　　padding: 0px;
}
.main {
　　display: flex;
　　flex-direction: column;
　　height: 100vh;
}
header {
　　height: 50px;
　　line-height: 50px;
　　background: #ddd;
　　text-align: center;
}
section {
　　overflow-y: auto;
}
footer {
　　height: 50px;
　　line-height: 50px;
　　background: #ddd;
　　width: 100%;
　　text-align: center;
}
</style>
</head>
<body>
　　<div class="main">
　　　　<header class="main_1">我是头部</header>
　　　　<section class="main_1">
　　　　　　<div class="content">
　　　　　　　　<div>11111111111</div>
　　　　　　</div>
　　　　</section class="main_1">
　　　　<footer>我是底部</footer>
　　</div>
</body>
2、如果是使用ionic框架，用其自带组件
     <ion-fab></ion-fab>

解决fixed在苹果手机抖动问题/头部底部固定布局的更多相关文章

  1. 解决安卓手机input获取焦点时会将底部固定定位按钮顶起的问题

    一个页面上有个固定在底部的按钮,页面中有个input框,点击input框获取焦点时,在苹果手机上没事,但在安卓手机上弹出的键盘会将按钮顶起来,这就很不好看了,想了个办法解决一下.之前一直觉得用inpu ...

  2. 在safari上，解决fixed失效问题

    一个页面中有头部.底部和中间内容区域,底部固定在屏幕底端. 头部header 内容main 底部footer 方法一.在main上使用fixed定位,加上overflow-y属性. .main { p ...

  3. ListView在列表的头部和底部添加布局——addHeaderView，addFooterView

    addHeaderView()方法:主要是向listView的头部添加布局addFooterView()方法:主要是向listView的底部添加布局 以addHeaderView为例: View he ...

  4. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  5. 微信小程序之顶部固定和底部固定

    顶部固定 <view style="position:fixed;top:0;"> ...... </view> 底部固定 <view style=& ...

  6. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  7. css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  8. Android 仿QQ首页的消息和电话的切换，首页的头部(完全用布局控制)

    Android 仿QQ首页的消息和电话的切换,首页的头部(完全用布局控制) 首先贴上七个控制布局代码 1.title_text_sel.xml 字体颜色的切换 放到color文件夹下面 <?xm ...

  9. 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动

    一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...

随机推荐

  1. Lein: Exception in thread "Thread-3" java.net.ConnectException: Connection refused

    leiningen Leiningen是你的主要工具, 它用于: 启动一个 REPL 下载+安装类库 运行你的程序 启动一个服务器, 运行你所写的webapps 安装 brew install lei ...

  2. Android Studio 开发利器【经常使用插件】

    1.ADB Idea ADB操作快捷菜单.高速清除数据,重新启动应用,卸载应用等 快捷键: Windows: Ctrl+Alt+Shift+A Mac OSX: Ctrl+Shift+A 当然,你能够 ...

  3. [NHibernate] 入门实例 NHibernate 3.3 GA + VS2010 +MySQL

    题外话: 中国的技术论坛要赶上stackoverflow的水平.至少还需35年.中国程序猿笔者的特点是:太浮躁,太easy下总结.太自得其乐,虽说写的是为了让别人更好的看.却也演变成了一种" ...

  4. cf2.25

    T1 题意:判断给出的数中有多少不同的大于的数. content:傻逼题,5min手速 T2 题意:给出p.y,输出y~p+1中最大一个不是2-p的倍数的数. content:答案很简单,但是很难想到 ...

  5. 9.23 NOIP模拟题(数学专练)

    数论基础 专题测试  命题人:清华大学 王赢绪 /* 水题 答案为C(n-k,m-1) 预处理阶乘和逆元,O(1)算答案 开始读错题了!!!朱一乐!!! */ #include<iostream ...

  6. [App Store Connect帮助]三、管理 App 和版本（2.6）输入 App 信息：新增 watchOS App 信息

    如果您的 iOS App 中包含 watchOS App,请确保您的描述中包含该 App 在 Apple Watch 上的功能.您还需要为 Apple Watch 的 App Store 提供额外的屏 ...

  7. [Apple开发者帐户帮助]九、参考（1）证书类型

    该证书类型有助于开发者帐户和Xcode的标识证书. 类型 目的 APNs Auth Key 生成服务器端令牌,以替代通知请求的证书. Apple推送服务 在通知服务和APN之间建立连接,以向您的应用提 ...

  8. Java转大数据开发全套视频资料

    大数据在近两年可算是特别火,有很多人都想去学大数据,有java转大数据的,零基础学习大数据的.但是大数据真的好学吗. 我们先来了解一下什么是大数据. 大数据是指无法在一定时间内用常规软件工具对其内容进 ...

  9. 【洛谷4933】大师（DP）

    题目: 洛谷4933 分析: (自己瞎yy的DP方程竟然1A了,写篇博客庆祝一下) (以及特斯拉电塔是向Red Alert致敬吗233) 这里只讨论公差不小于\(0\)的情况,小于\(0\)的情况进行 ...

  10. 函数 out 传值 分割

    public void Jia(int a ,int b) { a = a + b; Console.WriteLine(a); } public void Jia1(int a,out int b) ...