H5: 关于底部导航使用“fixed”会遮住网页最下面内容的解决办法！

最新推荐文章于 2024-08-22 11:49:56 发布
最新推荐文章于 2024-08-22 11:49:56 发布
阅读量1.7w 收藏 7
点赞数 8
分类专栏： 前端杂事 文章标签： h5 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csu_passer/article/details/85028302
版权

Bug

写完界面之后发现跑起来是这样的：

在这里插入图片描述

同学和我说可以考虑加一个空的<div>占住底部导航栏的位置。这样确实可行，但是会无缘无故多出一个标签，我感觉这很罪恶！

Solution

果然下班走在漆黑的小路上思考，突然灵光一闪发现可以这样

    <router-view style="padding-bottom: 53px"/>

给有底部导航的组件的子导航加上padding不就完美解决了吗—

在这里插入图片描述

我真TM是个人才–

csu_zipple
关注
专栏目录
解决安卓嵌套H5软键盘遮挡问题以及导航栏遮挡问题
11-15
解决安卓嵌套H5，软键盘遮挡输入框以及页面被华为、小米等底部导航栏遮挡问题
手机百度APP H5网页底部元素position:fixed属性失效. DIV元素结构被自动隐藏
D.uccky的博客
05-28 3623
如下图,在很多H5活动页都会有一个固定在底部的下载按钮,由于有设计好的字体,为了方便,通常会选择用一个图片放在div里面,再对div使用position:fixed属性. 但是由于手机百度APP里面有一个功能,叫做自动屏蔽广告.由于大多数的网页广告都才用这种展现的形式.所以,他们会把这个按钮当做广告直接屏蔽掉.此前,直接对img加了一个width:100%;的属性. 后来经过不断地尝试.发现只要图...
添加position：fixed定位小程序和H5页面页面高度不一样造成tabar遮挡问题
2203_75966395的博客
08-05 271
/
ios微信h5底部的横栏怎么去掉
sunyanjing_8949的博客
08-05 610
不过，这些方法会因微信浏览器版本的不同有所变化，可能并不适用于所有的iOS微信H5环境。在iOS微信H5中，底部的横栏通常是由微信浏览器自带的导航栏所引起的。3.通过iOS的特定CSS样式来隐藏导航栏和底部横栏。2.通过css样式来隐藏导航栏和底部横栏。1.切换到微信浏览器的全屏模式。一切还是以调试为主。
解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
热门推荐
最爱喝怡宝的博客
12-30 1万+
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题 1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head"&g
关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题
qq_40011214的博客
07-12 5092
在使用uni-app时，自己写了个底部tabbar导航栏，出现了tabbar遮挡内容的问题，如下图所示； 刚开始的时候，使用了顶部盒子padding-bottom 来时底部盒子撑开，但是在chrome浏览器中查看，效果无误 但是呢！！！ 当任务数据一旦多了之后，还是会有遮挡问题，并且遮挡问题在ios也就是苹果手机上的浏览器中打开没有实现想要的效果； 百度多次查询文档，并没有发现可行的办法，最后是在微信的技术群里提出的问题，还好啊，三个技术群就一个正八经的能给你解答问题的，剩下的都是叫你去百.
浏览器底部导航栏遮盖问题；app内嵌入h5底部导航下展示问题。
xy_is_fhh的博客
12-21 2389
浏览器底部导航遮盖信息；浏览器安全区域；绝对定位VS固定定位；app内嵌入h5底部导航下展示问题
解决position: fixed；遮挡其他邻近模块内容的问题
qq_44748860的博客
08-29 2194
由于位置属性值fixed的设置，导致底部button部分在文档流中不占据文档流位置，所以导致底部内容被遮挡，无法正常展示。top、margin-top的区别：（此处参考其他作者，链接：https://juejin.cn/post/6986935474635931656）因为fixed元素脱离了正常文档流，所以relative元素的原本位置向上提了，产生了覆盖的行为。来使得脱离文档流的内容在文档中占据正常的文档流空间，因此fixed属性值覆盖问题得以解决！方法一：给内容设置margin-top，
vue3·解决H5在手机端部分浏览器中底部工具栏会遮挡页面内容问题
最新发布
qq_43594001的博客
08-22 87
链接：https://www.jianshu.com/p/5924db127f71。商业转载请联系作者获得授权，非商业转载请注明出处。在使用100vh的地方使用 lang为scss。需要安装 vh-check 插件。在main.js里添加。
uni-app前端H5页面底部内容被tabbar遮挡的问题解决方案
此行必胜，你我顶峰相见
11-11 1万+
uni-app前端H5页面底部内容被tabbar遮挡的问题解决
CSS中使用position: fixed固定定位时遮挡下方内容
CssHero的博客
12-04 2972
通过设置padding-bottom或者z-index来解决固定定位的遮挡问题
uni-app前端H5页面底部内容被tabbar遮挡
qq_44792224的博客
11-09 3605
在用uniapp写小程序的时候，底部有一部分内容没显示出来，被底部的tabbar遮挡住了。
vue单页面在ios微信浏览器中首次跳转后页面底部会被微信导航栏遮盖住的问题解决方案
Hgh_1997的博客
03-23 2273
// 第一个是去掉默认微信导航栏 // 第二个是重新再次获取高度 ，写死高度里面用 overflow-y: scroll去做滚动 mounted() { // 只有微信浏览器中IOS系统才会出现的问题，由于导航栏的占了高度，所以要重新获取 setTimeout(()=>{ uni.getSystemInfo({ success:res => { ...
APP里引用H5页面时，高度设置引起的底部白边等问题
m0_63108819的博客
04-06 2542
H5页面在app里的常见问题： 1.当H5页面高度设置为100%，设置背景色时，发现高度有内容撑开，背景色没有铺满整个背景。 2.当H5页面高度设置为100vh，设置背景色时，背景设能铺满，但是上拉时底部有白边。 3.当H5页面高度设置为最小高度为 100%或100vh，内容超出屏幕高度，上拉有调取接口时，有卡顿现象。 解决方法： 　　可以在父元素设置：　 overflow-y: auto; position: fixed; left: 0; ...
H5页面适配iphoneX底部小黑条遮盖内容
AnlanJion的博客
05-08 6991
iphoneX取消了物理按键，改为底部小黑条，这也在页面开发的过程中，会出现底部内容被小黑条遮盖的现象，影响页面效果， 我们可以这也解决 1：增加viewport属性 viewport-fit="cover" <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user...
页面底部固定显示按钮，同时不覆盖页面内容
m0_61470782的博客
05-14 410
在页面底部添加按钮，并让它始终保持在页面底部，不随着下拉而改变位置，同时按钮不能覆盖页面内容。直接在页面之中添加一个Veiw，使其占据一定的高度，从而使页面内容能够完整显示。此时存在的问题就是当页面滑到底部时，按钮会覆盖页面内容。
用于在处理存在底部导航栏的设备上存在导航栏遮挡html页面的问题
myhong的博客
03-20 896
/** * 此处用于在处理存在底部导航栏的设备上存在导航栏遮挡html页面的问题 *option :view 满屏的视图 */ private void setWebContainerLayoutParams(View view) { ViewGroup.LayoutParams layoutParams = view.getLayoutParams(); ViewGrou...
如何解决iphone手机微信浏览器中滑动到页面底部出现黑色背景盖住position:fixed的页面元素的问题？
kakaxiD的博客
08-03 9893
上述问题在Android端没有问题，只是在iphone中出来的。 图片中底部导航元素和扫码图标都是用position:fixed定位的，打开页面滑动到底部，继续向上滑动时，浏览器的背景就被带着向上滚动，并且会覆盖上面说的固定定位的元素。不知道大家有没有遇到过。。。 我在网上搜索问题的时候看到了这个问题，自己也遇到了同样的问题，找了一天，（本人菜鸟一只）。原来我html{overflo
position: fixed定位带来的白色横线
qq_41956361的博客
07-12 1267
1.使用fixed可以帮我们快速的相对屏幕固定位置，但是页给我们带来的很多问他，比如滚动，层级，还有手机设备可能会出现一条横线。
h5 position: fixed 在ios手机上会跟随滚动，怎么解决
06-01
解决这个问题的一种方法是使用 `-webkit-overflow-scrolling: touch` 属性，该属性会在滚动时启用 iOS 的原生滚动效果，这样可以使 `position: fixed` 元素固定在页面上而不会跟随滚动。 例如，可以通过以下 CSS 来...
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值