admin管理员组

文章数量:1130349

其他安卓浏览器都没问题，在微信浏览器中会出现这种情况，是因为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;

}

其他安卓浏览器都没问题，在微信浏览器中会出现这种情况，是因为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;

}

本文标签： 器中区域内容网站fixed

版权声明：本文标题：H5网站-微信浏览器中打开底部fixed遮住内容区域问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1743813208a2034156.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。