微信小程序footer遮挡页面内容的解决方法

问题场景:

开发微信小程序时,使用到了底部footer作为导航栏。


问题描述:

底部的footer导航栏会遮挡住正文的内容,即将页面下拉到底端时,仍然有一些内容无法显示。


原因分析:

页面的内容被footer遮挡了。
Footer是利用position:fixed来实现的。但是,使用position:fixed会使自定义的footer挡住页面最下端的内容。


解决方案:

方案一

<footer>块之外再包裹一层div,然后再增加一个与<footer>同级的<div>块,当<div>块的高度和<footer>一样的时候,主页面就会有一个和<footer>一样大小的pad,问题就解决了

<div>
    <div style="height:60px;">
    </div>
    <p>
	</p>
    <section class='footer'>
        <div class='reply-topic'>Footer名</div>
    </section>
</div>

方案二

直接在被挡着内容的上一级的div里面加上padding-bottom: 15%

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值