ios上position:fixed失效问题

爱被打了一巴掌 2022-11-25 10:16 695阅读 0赞

今天项目上遇到了在Ios上fixed失效问题，解决办法是用 ionic 的 ion-tabs 组件解决的，主要原理就是用 position: absolute 实现  position: fixed 效果。下面举个小例子

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Tabs</title>
      <style>
        .ion-tabs {
    		display: flex;
    		position: absolute;
    		flex-direction: column;
    		left: 0;
    		right: 0;
    		top:0;
    		bottom: 0;
    		width: 100%;
    		height: 100%;
    		z-index: 0;
    		background: blue;
    	}
    	.ion-tab {
    		display: flex;
    		position: absolute;
    		flex-direction: column;
    		left: 0;
    		right: 0;
    		top:0;
    		bottom: 0;
    		z-index: 0;
    		background: pink;
    		overflow: hidden;
    	}
    	.ion-tab-bar {
    		position: absolute;
    		bottom: 0;
    		height: 100px;
    		width: 100%;
    		background: yellow;
    	}
    	.scroll {
    		display: flex;
    		overflow-y: scroll; 
    	}
    	.content {
    		display: flex;
    		height: 1000px;
    	}
      </style>
    </head>
    <body>
      <div class="ion-tabs">
    	<div class="ion-tab">
    		<div class="scroll">
    			<div class="content">content</div>
    		</div>
    	</div>
    	<div class="ion-tab-bar">ion-tab-bar</div>
      </div>
    </body>
    </html>

主要是根据 ionic 的 ion-tabs组件来灵感，原理就是用父层div 设置class="ion-tabs" 让他成为最外层div设置position: absolute并且占据整个屏幕，这样子元素设置position: absolute就会根据父元素进行定位了，class="ion-tab-bar"  设置bottom: 0;就会置底了，然后再设置高度就好了

发表评论取消回复

表情：

评论列表（有 0 条评论，695人围观）

还没有评论，来说两句吧...

相关阅读

相关 ios overflow-x:auto 失效解决

问题描述 iOS获取时间为NAN的问题解决解决方法将日期格式设置为format="yyyy/MM/dd HH:mm:ss"就好了，format="yyyy-M

ゞ浴缸里的玫瑰/ 2024年04月01日 12:54/ 0 赞/ 73 阅读

相关解决Layui表格头部工具栏事件绑定失效，上传文件按钮失效问题

背景最近使用了layui的前端框架，也在慢慢适应中，好多功能都已经封装得很实用，遇到不会的功能，看看官网的demo的文档，都还是可以解决的，毕竟咱们的模仿能力还是可以的

不念不忘少年蓝@/ 2022年12月07日 01:20/ 0 赞/ 1066 阅读

相关 ios上position:fixed失效问题

今天项目上遇到了在Ios上fixed失效问题，解决办法是用 ionic 的 ion-tabs 组件解决的，主要原理就是用 position: absolute 实现 posi

爱被打了一巴掌/ 2022年11月25日 10:16/ 0 赞/ 696 阅读

相关 IOS上架审核问题

最近IOS上架老是被拒，好在是现在上架审核时间缩短了，要是不缩短真是要影响很多事情。一下作出几点建议。 1.请一定要看苹果官方上架审核指

左手的ㄟ右手/ 2022年07月24日 09:26/ 0 赞/ 284 阅读

相关 js的click事件在IOS上失效

IOS手机网页使用click操作时候。会出现click事件无法使用的情况。总结了网上一些解决的办法，然后自己亲自测试了。有三个方法： 1) 把事件委托到a

拼搏现实的明天。/ 2022年07月12日 12:46/ 0 赞/ 451 阅读

相关 ios上iFrame滚动条失效

在做公户号的时候，有一个页面引入了IFrame。然后出现了一个很尴尬的问题，iframe不出现滚动条，而且在屏幕高度以外的内容都被截掉了。百度之后，找到了解决方案，亲测可行

短命女/ 2022年05月27日 09:50/ 0 赞/ 203 阅读

相关 ios 定位属性postion: fixed失效

在ios版本8.xx fixed是失效的：解决方法 /\ ios fixed失效 \/ .fixed-content\{ overflow: auto; \-

分手后的思念是犯贱/ 2022年04月10日 04:46/ 0 赞/ 327 阅读

相关 ios input失效

用mui开发app的时候碰到一个奇怪的问题。 ios 的input 有时候失效，或者输入一次点击完成后，再点就无效了找了很久，也上网查了，很多都是说 user-sele

今天药忘吃喽~/ 2022年02月01日 05:04/ 0 赞/ 317 阅读

相关 scrollTop失效问题

最近在做京东案例：当搜索框随着滚动条的滚动产生渐变效果 / Created by Administrator on 2019/4/11. /

浅浅的花香味﹌/ 2021年09月18日 21:58/ 0 赞/ 602 阅读

相关 IOS环境下，微信分享失效问题

最近在做一个公众号，涉及到分享的功能，但是在安卓机上，自定义的分享配置参数能够被触发，而在ios苹果手机上却失效了，苦苦寻觅在百度上搜索解决办法，但都没有效果，，配置参数如下：

叁歲伎倆/ 2021年09月15日 07:54/ 0 赞/ 716 阅读