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

最新推荐文章于 2022-12-01 20:45:41 发布

转载最新推荐文章于 2022-12-01 20:45:41 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuyedaocao/p/8969804.html

本文介绍了两种实现头部和底部固定，中间内容滚动的网页布局方法：一是使用 absolute 定位结合 height:100%；二是利用 flex 布局与 height:100vh 实现。此外还提及了在 Ionic 框架中实现类似效果的方法。

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