关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法
来源:互联网 发布:指针数组初始化 null 编辑:程序博客网 时间:2024/05/17 23:19
项目中有个需求时在页面的最下面有一排按钮,这排按钮需要固定到页面的最下面,不能随着屏幕的滚动为滚动。
问题:
功能是使用css的position:fixed; bottom:0;属性设置的。
单独一个页面访问,不管在PC上还是移动设备上都可以正常显示。
But,当这个页面被一个iframe嵌入的时候,在ios设备上footer一直处在页面内容的最下面,而不是屏幕的最下面。而PC和android设备上可以正常显示。
原因:iframe嵌入后,ios设备不支持position:fixed;属性。
解决办法:
方案1:.动态计算footer的高度,而且footer的高度时相对iframe计算的,所以footer的高度(top)是 = 屏幕滚动条的高度 + 屏幕的高度 - header的高度 - footer的高度。
当时亲测,在ipad上是不支持window.scroll事件的,没法获取真正的scrollHeight的值。如果添加了touchmove事件,但获取的pageY高度又不准确,时刻在变化,导致footer上下闪动。 【亲测失败,请高人指教!!!】
方案2:设置body的高度为一个固定值,即body{height:600px;overfolw-y:auto;} ,这样footer就能永远停在屏幕的最下面了。但是body体中出现滚动条,需要隐藏起来。
0 0
- 关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法
- session失效刷新后登录页面嵌入在iframe中的解决办法
- session失效刷新后登录页面嵌入在iframe中的解决办法
- iframe中position:fixed失效
- iframe子页面position的fixed
- ios设备下使用iframe时 fixed失效以及iframe无法设置高度的问题
- JS的input框fixed属性在iOS上失效的问题
- html开发,在ios中当软键盘弹出后,position:fixed失效
- ios解决输入框弹出后position:fixed失效问题
- ios下,iframe页面中的position:fixed定位布局错误
- 关于IE6不支持position:fixed的解决办法
- iPhone手机浏览器运行嵌入页面的iframe时候会撑全屏,页面在安卓手机上正常,解决办法
- position:fixed的解决办法!
- position:fixed失效的问题
- React.js在ios设备上onClick事件失效的解决办法
- position设置为fixed的div在手机浏览器上异常的解决办法
- 关于移动端使用局部滚动解决ios不支持position:fixed后产生的问题
- position:fixed失效问题
- Bugtags 实时跟踪插件 - BugtagsInsta
- Android 开发之Git的使用,你绝对值得拥有
- 叠筐
- (五)4 写个简单的LED驱动
- 超像素分割技术发展情况梳理(Superpixel Segmentation)
- 关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法
- 第四周项目1-建立单链表
- 顺时针输出矩阵
- bzoj1593(线段树)
- caffe-android-lib 在ubuntu下的编译
- 高精度模板
- 21 viewPager--- hzScrollView ----llContainer
- Android TextView中文字通过SpannableString来设置超链接、颜色、
- 对类成员函数的另类调用方法