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. HDOJ 5383 Yu-Gi-Oh! 最大费用最大流

    网络流裸题: 分两部分建图,求不要求满流的最大费用最大流..... Yu-Gi-Oh! Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: ...

  2. MICRO SIM卡(SIM小卡)尺寸图及剪卡图解

    如今使用MICRO SIM卡的手机越来越多.近期刚刚买了一个手机到手才发现尼马使用的是MICRO SIM卡.再去买剪卡器吧,十几二十块用一次就废了,去营业厅吧.又比較远,懒的出门.怎么办呢,自己剪!这 ...

  3. Solr基础教程之solrconfig.xml（三）

    前面介绍过schema.xml的一些配置信息,本章介绍solrconfig.xml的配置,以及怎样安装smartcn分词器和IK分词器,并介绍主要的查询语法. 1. solr配置solrconfig. ...

  4. Linux安装MATLAB

    Linux下的MATLAB在2013a及以后的版本中,就不再支持32位机了.所以32位Linux系统无法安装2013a及以后版本.[1] Linux下安装MATLAB时,需要先配置好JRE,可以参考: ...

  5. bzoj3894: 文理分科（还是那道最小割）

    3894: 文理分科 题目:传送门 感谢波老师没有来D飞我,让我做出了这题... 题解: 这题其实和我做的上一题(bzoj2132)很像,所以就不写题意了. 依然是那最小割... 这题给出了四个利益矩 ...

  6. 水晶报表的宽度调整方法（设计器、代码调整、rpt文件属性）

    水晶报表的宽度调整方法(设计器.代码调整.rpt文件属性) Posted on 2010-08-07 23:52 moss_tan_jun 阅读(1725) 评论(0) 编辑 收藏 经过个人反复研究后 ...

  7. ubuntu查看'任务管理器'

    ubuntu下的任务管理器打开方式:命令行输入'gnome-system-monitor'即可,展示如下:

  8. JQuery 总结

     JQuery官方网站 http://jquery.com/ 1.JQuery概念 A.Jquery是一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器,jQu ...

  9. jquery中对于为一组标签赋予点击事件

    可以用each,但是each不能对动态的元素进行事件的绑定, 不过,其实也很简单,只需要获取所有的标签集,然后用动态绑定的方法,比如live进行绑定就可以了. 有时候,其实不难,只是自己想的太过复杂. ...

  10. [Swift通天遁地]八、媒体与动画-(9)快速实现复合、Label、延续、延时、重复、缓冲、弹性动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...