H5网站-微信浏览器中打开底部fixed遮住内容区域问题

阅读: 评论:0

其他安卓浏览器都没问题,在微信浏览器中会出现这种情况,是因为fixed兼容性问题造成,但是此时absolute并不能满足需求,故使用如下方式解决:

<div>

<div class="content-box"></div>

<div class="nav-bottom"></div>

</div>

.nav-bottom {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

   height: 50px;

}

.content-box {

  /*main绝对定位,进行内部滚动*/

  position: absolute;

  /*top是头部的高度*/

  top: 0px;

  // /*bottom是底部的高度*/

  bottom: 50px;

  /*使之可以滚动*/

  overflow-y: scroll;

  /*增加弹性滚动,解决滚动不流畅的问题*/

  -webkit-overflow-scrolling: touch;

}

本文发布于:2025-04-05 08:33:00,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/1743813210583922.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:器中   区域   内容   网站   fixed
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23