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. docker Cannot start container [8] System error: exec format error

    docker Cannot start container  [8] System error: exec format error 学习了:https://www.aliyun.com/jiaoch ...

  2. Ubuntu12.04LTS 安装 eclipse

    首先安装JDK,参考:Ubuntu12.04.3LTS安装Oracle Java 7 然后安装eclipse: 安装方法一:通过命令行/Software Center下载Ubuntu源中的Eclips ...

  3. git 入门级使用

    git-book 全局配置:(配置完之后,进行一次密码设置之后,无需再使用密码进行分支管理) git config --global user.name "zhxj" git co ...

  4. Oracle执行存储过程报错——ora-01031:权限不足

    执行DDL报错 在oracle存储过程中,默认是可以直接执行DML和DQL的,但是执行CREATE这种的DDL则需要借助EXECUTE IMMEDIATE 如: create or replace p ...

  5. 从基于 SQL 的 CURD 操作转移到基于语义 Web 的 CURD 操作

    中文名称 CURD 含义 数据库技术中的缩写词 操作对象 一般的项目开发的各种参数 作用 用于处理数据的基本原子操作     它代表创建(Create).更新(Update).读取(Retrieve) ...

  6. javascript设置和获取cookie的方法

    设置cookie的方法,和获取cookie的方法例如以下 设置cookie document.cookie="name="+value; //获取cookie当中index是coo ...

  7. SoapUI项目书写自我规范

    -->Assertions 判断某个节点存在(_input_name, _button_name) -->Resource 文件夹命名 值去掉红色部分信息 https://mercury- ...

  8. oc80--copy

    // // main.m // Copy基本使用,拷贝的本质:修改其中一个不能影响另外一个. // 每个oc对象都有copy和mutableCopy方法,前提是必须遵守NSCopying协议实现cop ...

  9. case when进行数据统计

    SELECT SUM(CASE WHEN `status` = '1' THEN 1 ELSE 0 END) AS waitpay, SUM(CASE WHEN `group_done` = '1' ...

  10. imagebutton 设置了src属性的图片更换

    <ImageButton android:id="@+id/mediacontroller_play_pause" android:layout_width="wr ...