解决fixed在苹果手机抖动问题/头部底部固定布局

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>

<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>

</section class="main_1">

</div>

</body>

2、如果是使用ionic框架，用其自带组件

<ion-fab></ion-fab>

转载于:https://www.cnblogs.com/yuyedaocao/p/8969804.html

解决fixed在苹果手机抖动问题/头部底部固定布局相关推荐

中间滑动头部底部固定_固定抗震弹性支座报价技术参数
固定抗震弹性支座报价技术参数路泽科技固定抗震弹性支座.滑动抗震弹性支座现在越来越多的被用在网架钢结构工程上,因为它是球型支座设计,没有橡胶部分,可满足大位移,大转角,使用寿命长等特点,逐渐取代了起初 ...
中间滑动头部底部固定_固定抗震成品支座功能特点及作用
固定抗震成品支座功能特点及作用固定抗震成品支座作为结构节点的中间力量,作用不容小觑,是建筑结构承重的关键之一,支座质量的选择也是很重要的,千万不要图便宜,一定要多比较,网上的信息良莠不齐,很难分辨, ...
vue实现某一区域滚动，头部底部固定，中间滚动
滑动插件:better-scroll 1.npm install better-scroll -S 2.引入配置 import BetterScroll from 'better-scroll' le ...
前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案
相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和io ...
前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案...
相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和io ...
css 解决fixed 布局下不能滚动的问题
css 解决fixed 布局下不能滚动的问题参考文章: (1)css 解决fixed 布局下不能滚动的问题 (2)https://www.cnblogs.com/fuzitu/p/9473508.h ...
datagrid底部显示水平滚动_CSS flex 布局，头部和底部固定，中间出现滚动条
文章目录原理说明案例(原理说明) 案例二(回字形布局) 案例 (计算出中间组件的高度,剩下的百分百) 原理说明利用flex布局,很容易实现"左右两边固定,剩余100%"的布局 ...
css解决transform 方法字体抖动
css解决transform 方法字体抖动抖动的dom添加 translate3d transform: translate3d(0,0,0);
Android 解决Tablayout不显示标题，头部一片空白的问题
前言 Android 解决Tablayout不显示标题,头部一片空白的问题如果你也是一样的问题那么请往下看可能我们的问题是一样导致的效果解决思路最近在项目中到了 TabLayout+Vie ...

解决fixed在苹果手机抖动问题/头部底部固定布局

解决fixed在苹果手机抖动问题/头部底部固定布局相关推荐

最新文章

热门文章