ios上position:fixed失效问题

手机端上的猫腻真是多啊~~~ 此起彼伏!

最近又遇到了 固定定位的底部导航在ios上被弹出去

此时内心1w+个草泥马奔过~~~~~~~~

直接上解决方案:

<div class="main_comment">```````````````````</div>
<div class="commentBar">回复框</div>
.main_comment{
  width: 100%;
  position: absolute;
  overflow-y: auto;
  top: 0;
  bottom: 0;
  -webkit-overflow-scrolling: touch;   /*这句是为了滑动更顺畅*/
}
.commentBar{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 5px;
  z-index: 99;
}

 

这里都是用了absolute去解决,达到理想中的效果。

 

  

时间: 2024-10-28 21:45:41

ios上position:fixed失效问题的相关文章

ios下position:fixed失效的问题解决

如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:fixed这个css属性就会失效,你懂的,苹果就是搞特殊,下面我就用css来解决这个问题. 1.这个是要滑动的内容的css: .page-content { overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-bo

position:fixed 失效

如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 . 把 transform删除或设置为none就可以解决啦. 但是如果transform是必要的,不能删除,我们可以在此父级最外层再加一层元素专门用于定位,这样position:fixed就能生效啦. 举个栗子: /* 一定要将ancestor和parent的大小设置为一样大*/ .ancestor{ position: relative; /*重点*/ width: 300p

position:fixed失效情况

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

Jquery 在ios上事件委托失效

点击通过js遍历出来的列表,跳转页面.点击事件委托在document上, 像这样: $(document).on("click",".nav",function(){  }) 在web和Android上度没问题,能够正常跳转.但是在ios上点击没有任何反应.原因是:ios上事件委托不能绑定在document和ios上,应该绑定在它的其它父级元素上 $.each(dataall,function(i,item){ str += '<div class="

transform 遇上 position: fixed

最近遇到一个有意思的现象,以下 demo 中 fixed 的元素没有相对 viewport 定位,而是相对于它的父元素进行定位. <html> <head> <style> .parent { width: 200px; height: 300px; background: yellow; transform: scale(1); } .fixed { position: fixed; left: 0; right: 0; bottom: 0; background:

在ios上,fixed定位因为input导致手机下面出现空白,视图变小

<div class="btnBox" v-show="isOriginHei"> <div class="btn" >提交</div> </div> vue项目项目中在mountd里面获取视图的高度 mounted() {       const that = this     window.onresize = () => {                return (() =>

IE6 position:fixed 固定定位问题

IE6下 position:fixed失效,解决方法如下: 除了IE6的浏览器 .top { width: 97px; height: 278px; background: #e0c157; position: fixed; z-index: 30000; /*    控制左右位置*/ right: 50px; margin-bottom: 10px; } 针对IE6使元素固定在浏览器的顶部 .top{  _position:absolute; _bottom:auto; _top:expres

关于position:fixed在ios上通用的解决方法

最近在项目中 总是遇到一些奇奇怪怪的css样式问题,在网上找了一大堆方法 都没什么用, 最后仔细思考了之后发现,并不是没用,而是适应条件不一样,话不多说直接进入主题. 假如你的项目需要滚动的地方上一层有很多个div包着,并且也有position:fixed的div包着 还有一堆烂七八糟的css样式,这时你想滚动的那个页面本来是有顶部固定或者是底部固定,到后面都会随着页面一起滚动,在ios上会这样,安卓却不会,解决方法其实很简单,把需要滚动的部分用一个div包起来 然后也fixed就可以了. 例如

解决ios、微信移动端的position: fixed; 支持性不好的问题 &amp;&amp; 禁用下拉暴露黑底的功能

解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问题(第一个问题). 并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了,而body是可以的,确实让人很郁闷(第二个问题). 对于第二个问题,我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样. 但是对于第一个问题,确实没有很好的解决方法. 所以就