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. windows bat命令 开启关闭Oracle服务

    0.吐槽 单位发的ThinkPad T61.太弱小了. 问题是我去百度下T61,发现它好贵好贵.真心无力吐槽.还不如给我发台外星人,廉价点的. . Oracle一开就内存就不够了.所以绝对不能让它开机 ...

  2. libcurl库进行http通讯-一些主要的函数

    这里就简介一下libcurl的一些主要的函数. 调用curl_global_init()初始化libcurl 调用curl_easy_init()函数得到 easy interface型指针 调用cu ...

  3. cacheed 限制 4节点 3000万 es 批量删除 shell脚本练习 elasticsearch_action

    文件分割 "www.laiwunews.cn/xinxi/25324717.html""www.zznews.cn/xinxi/10411214.html"&q ...

  4. changing permissions of Read-only file system in linux

      up vote 2 down vote favorite 1 i use this command to make a bootable flash disk of linux mint sudo ...

  5. 深入理解7816（1）---- 关于F/D和etu【转】

    本文转载自:http://blog.sina.com.cn/s/blog_4df8400a0101gkss.html 深入理解7816(1)---- 关于F/D和etu 对于刚接触智能卡的工程师来说, ...

  6. Visual Studio AI

    Visual Studio 完全AI手册 - 从0开始配置环境 https://www.cnblogs.com/ms-uap/p/9123033.html 零.前提条件 一台能联网的电脑,使用win1 ...

  7. bzoj2253

    cdq分治+dp 看见三维偏序是cdq,互相包含是最长上升子序列 这个代码是错的 交了两份代码,发现手动出数据是不一样的... 不调了 #include<bits/stdc++.h> us ...

  8. openStack aio nova service-list neutron ext-list

  9. sql数据库CHECKDB时报x个分配错误和x个一致性错误

    --1.在SQL查询分析器中执行以下语句:(注以下所用的POS为数据库名称,请用户手工改为自己的数据库名) use pos dbcc checkdb --2.查看查询结果,有很多红色字体显示,最后结果 ...

  10. B. Trees in a Row(cf)

    B. Trees in a Row time limit per test 1 second memory limit per test 256 megabytes input standard in ...