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
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
专栏目录
手机百度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 269
/
ios微信h5底部的横栏怎么去掉
sunyanjing_8949的博客
08-05 492
不过，这些方法会因微信浏览器版本的不同有所变化，可能并不适用于所有的iOS微信H5环境。在iOS微信H5中，底部的横栏通常是由微信浏览器自带的导航栏所引起的。3.通过iOS的特定CSS样式来隐藏导航栏和底部横栏。2.通过css样式来隐藏导航栏和底部横栏。1.切换到微信浏览器的全屏模式。一切还是以调试为主。
解决安卓嵌套H5软键盘遮挡问题以及导航栏遮挡问题
11-15
解决安卓嵌套H5，软键盘遮挡输入框以及页面被华为、小米等底部导航栏遮挡问题
浏览器底部导航栏遮盖问题；app内嵌入h5底部导航下展示问题。
xy_is_fhh的博客
12-21 2361
浏览器底部导航遮盖信息；浏览器安全区域；绝对定位VS固定定位；app内嵌入h5底部导航下展示问题
vue3·解决H5在手机端部分浏览器中底部工具栏会遮挡页面内容问题
最新发布
qq_43594001的博客
08-22 69
链接：https://www.jianshu.com/p/5924db127f71。商业转载请联系作者获得授权，非商业转载请注明出处。在使用100vh的地方使用 lang为scss。需要安装 vh-check 插件。在main.js里添加。
uni-app前端H5页面底部内容被tabbar遮挡的问题解决方案
此行必胜，你我顶峰相见
11-11 1万+
uni-app前端H5页面底部内容被tabbar遮挡的问题解决
解决position: fixed；遮挡其他邻近模块内容的问题
qq_44748860的博客
08-29 2129
由于位置属性值fixed的设置，导致底部button部分在文档流中不占据文档流位置，所以导致底部内容被遮挡，无法正常展示。top、margin-top的区别：（此处参考其他作者，链接：https://juejin.cn/post/6986935474635931656）因为fixed元素脱离了正常文档流，所以relative元素的原本位置向上提了，产生了覆盖的行为。来使得脱离文档流的内容在文档中占据正常的文档流空间，因此fixed属性值覆盖问题得以解决！方法一：给内容设置margin-top，
h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案
weixin_39528029的博客
10-25 1024
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...
移动端h5 顶部菜单栏_移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法...
weixin_29337389的博客
12-24 2129
在现在的前端页面中，尤其是移动端，经常会需要将或者是模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。“回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。复制代码代码如下:...回复主题...实现这样的功能当然是利用position:fixed。但是，使用position:fixed有一个bug，以悬浮在最下方为例(悬浮同理)，当页面滑到最下方的时候...
position: fixed后内容被覆盖解决方法
skysys的研究小屋
07-16 1万+
在设置了positon的盒子外部再设置一个相同高度的div即可
完美解决手机网页中输入框被输入法遮挡的问题
11-27
解决办法 css部分 （dlg-top与dlg-bottom为对话框的类，用于确定对话框的定位方式） .dlg-top{ position: fixed; top:100px; left:10%; } .dlg-bottom{ position: fixed; bottom:0px; left:10%; } js部分 ...
android h5输入框被键盘遮挡,h5软键盘挡住输入框问题解决（android）
weixin_42521949的博客
05-27 6336
问题如图一个表单：在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起(ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域，这里不做讨论)问题分析及解决办法确立最常见的是使用两个方法：scrollIntoViewIfNeeded()、scrollIntoView()，使用方法自行百度。在我这...
关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题
qq_40011214的博客
07-12 5082
在使用uni-app时，自己写了个底部tabbar导航栏，出现了tabbar遮挡内容的问题，如下图所示； 刚开始的时候，使用了顶部盒子padding-bottom 来时底部盒子撑开，但是在chrome浏览器中查看，效果无误 但是呢！！！ 当任务数据一旦多了之后，还是会有遮挡问题，并且遮挡问题在ios也就是苹果手机上的浏览器中打开没有实现想要的效果； 百度多次查询文档，并没有发现可行的办法，最后是在微信的技术群里提出的问题，还好啊，三个技术群就一个正八经的能给你解答问题的，剩下的都是叫你去百.
h5在ios小程序中fixed滑动遮挡(回弹机制)
qq_39189369的博客
12-14 3576
解决h5在ios浏览器中,fixed滑动遮挡
CSS中使用position: fixed固定定位时遮挡下方内容
CssHero的博客
12-04 2863
通过设置padding-bottom或者z-index来解决固定定位的遮挡问题
vue单页面在ios微信浏览器中首次跳转后页面底部会被微信导航栏遮盖住的问题解决方案
Hgh_1997的博客
03-23 2270
// 第一个是去掉默认微信导航栏 // 第二个是重新再次获取高度 ，写死高度里面用 overflow-y: scroll去做滚动 mounted() { // 只有微信浏览器中IOS系统才会出现的问题，由于导航栏的占了高度，所以要重新获取 setTimeout(()=>{ uni.getSystemInfo({ success:res => { ...
APP里引用H5页面时，高度设置引起的底部白边等问题
m0_63108819的博客
04-06 2531
H5页面在app里的常见问题： 1.当H5页面高度设置为100%，设置背景色时，发现高度有内容撑开，背景色没有铺满整个背景。 2.当H5页面高度设置为100vh，设置背景色时，背景设能铺满，但是上拉时底部有白边。 3.当H5页面高度设置为最小高度为 100%或100vh，内容超出屏幕高度，上拉有调取接口时，有卡顿现象。 解决方法： 　　可以在父元素设置：　 overflow-y: auto; position: fixed; left: 0; ...
解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
热门推荐
最爱喝怡宝的博客
12-30 1万+
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题 1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head"&g
h5 position: fixed 在ios手机上会跟随滚动，怎么解决
06-01
在 iOS 上，`position: fixed` 在默认情况下会在滚动时跟随页面滚动。解决这个问题的一种方法是使用 `-webkit-overflow-scrolling: touch` 属性，该属性会在滚动时启用 iOS 的原生滚动效果，这样可以使 `position: fixed` 元素固定在页面上而不会跟随滚动。 例如，可以通过以下 CSS 来解决这个问题： ``` body { -webkit-overflow-scrolling: touch; } .fixed-element { position: fixed; } ``` 这将使 `body` 元素使用 iOS 的原生滚动效果，并使任何具有 `position: fixed` 属性的元素在页面上固定，而不会跟随滚动。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值