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

Yuhang Li

学习笔记

发布于：2021年12月1日

次浏览

问题场景：

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

问题描述：

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

原因分析：

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

解决方案：

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

1
2
3
4
5
6
7
8
9

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

方案二

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

更新于：2022年1月26日

微信小程序

XML