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

最新推荐文章于 2024-08-22 11:49:56 发布
原创 最新推荐文章于 2024-08-22 11:49:56 发布 · 1.8w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#h5 #导航

本文介绍了一种解决底部导航栏遮挡内容区域的方法，通过给有底部导航的组件子元素添加padding-bottom属性，避免了额外标签的使用，保持了代码的整洁。

Bug

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

在这里插入图片描述

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

Solution

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

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

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

在这里插入图片描述

我真TM是个人才–

position: fixed后内容被覆盖解决方法
skysys的研究小屋
07-16 1万+
在设置了positon的盒子外部再设置一个相同高度的div即可
Vue3 - 手机移动端H5网页强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页微信内置浏览器）
🏆 前端领域优质创作者
06-22 1万+
vue3，h5网页，input输入框组件，vue3 h5软键盘弹出，vue3输入框，键盘弹起时页面整体上移问题，uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决vue3输入框，键盘弹起时页面整体上移问题，vue3调用手机系统软键盘，页面窗口被顶起，布局定位失效，解决VUE3软键盘弹起导致页面fixed定位元素被顶上去，输入法软键盘弹起，窗口顶起，变形解决办法，Vue中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在，Vue3软键盘把界
h5 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
07-09 1万+
方法一：JS判断 function isIphoneX(){ if(/iphone/gi.test(window.navigator.userAgent)){ /* iPhone X、iPhone XS */ var x=(window.screen.width === 375 && window.screen.height === 81...
解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
热门推荐
最爱喝怡宝的博客
12-30 1万+
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题 1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head"&g
浏览器底部导航栏遮盖问题；app内嵌入h5底部导航下展示问题。
xy_is_fhh的博客
12-21 3174
浏览器底部导航遮盖信息；浏览器安全区域；绝对定位VS固定定位；app内嵌入h5底部导航下展示问题
解决安卓嵌套H5软键盘遮挡问题以及导航栏遮挡问题
11-15
解决安卓嵌套H5，软键盘遮挡输入框以及页面被华为、小米等底部导航栏遮挡问题
【vue】vue 解决position:fixed 遮盖下方元素问题
Meditation_Crazy
06-13 2447
前言 转载自：https://blog.youkuaiyun.com/weixin_40425415/article/details/111595120
关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题
qq_40011214的博客
07-12 5599
在使用uni-app时，自己写了个底部tabbar导航栏，出现了tabbar遮挡内容的问题，如下图所示； 刚开始的时候，使用了顶部盒子padding-bottom 来时底部盒子撑开，但是在chrome浏览器中查看，效果无误 但是呢！！！ 当任务数据一旦多了之后，还是会有遮挡问题，并且遮挡问题在ios也就是苹果手机上的浏览器中打开没有实现想要的效果； 百度多次查询文档，并没有发现可行的办法，最后是在微信的技术群里提出的问题，还好啊，三个技术群就一个正八经的能给你解答问题的，剩下的都是叫你去百.
h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案
weixin_39528029的博客
10-25 1358
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...
完美解决手机网页中输入框被输入法遮挡的问题
11-27
解决办法 css部分 （dlg-top与dlg-bottom为对话框的类，用于确定对话框的定位方式） .dlg-top{ position: fixed; top:100px; left:10%; } .dlg-bottom{ position: fixed; bottom:0px; left:10%; } js部分 ...
uniapp 开发H5项目，点击输入框，弹窗手机键盘，输入框会自动上移并把顶部的div遮住，怎么处理不遮住
最新发布
08-23
我们正在解决UniApp开发H5项目时，输入框被手机键盘遮挡的问题。用户希望避免顶部div也被遮住。 根据引用内容，我们可以总结几种常见解决方案： 1. 调整页面滚动：当输入框获得焦点时，将输入框滚动到可视区域...
uni-app前端H5页面底部内容被tabbar遮挡的问题解决方案
此行必胜，你我顶峰相见
11-11 1万+
uni-app前端H5页面底部内容被tabbar遮挡的问题解决
vue3·解决H5在手机端部分浏览器中底部工具栏会遮挡页面内容问题
qq_43594001的博客
08-22 999
链接：https://www.jianshu.com/p/5924db127f71。商业转载请联系作者获得授权，非商业转载请注明出处。在使用100vh的地方使用 lang为scss。需要安装 vh-check 插件。在main.js里添加。
uni-app前端H5页面底部内容被tabbar遮挡
qq_44792224的博客
11-09 4509
在用uniapp写小程序的时候，底部有一部分内容没显示出来，被底部的tabbar遮挡住了。
CSS中使用position: fixed固定定位时遮挡下方内容
CssHero的博客
12-04 4504
通过设置padding-bottom或者z-index来解决固定定位的遮挡问题
.h5底部输入框被键盘遮挡问题，或者底部导航栏被弹起问题的解决办法
qq_38751315的博客
04-10 2556
在h5页面中，当输入框在最底部，点击软键盘会出现输入框会被遮挡问题，或者是底部有一个固定定位的导航，然而每次一点击输入框，弹出输入法的时候，这个底部的导航会随着输入法被顶上去问题。 解决办法：由于弹起输入法，会执行onresize 事件，根据窗口变化，将原先是固定定位的元素改为position:static;。当关闭输入法时再切换回position:absolute;。 var getHeight = $(document).height(); $(window).resize(function(){
vue单页面在ios微信浏览器中首次跳转后页面底部会被微信导航栏遮盖住的问题解决方案
Hgh_1997的博客
03-23 2387
// 第一个是去掉默认微信导航栏 // 第二个是重新再次获取高度 ，写死高度里面用 overflow-y: scroll去做滚动 mounted() { // 只有微信浏览器中IOS系统才会出现的问题，由于导航栏的占了高度，所以要重新获取 setTimeout(()=>{ uni.getSystemInfo({ success:res => { ...
解决position: fixed；遮挡其他邻近模块内容的问题
qq_44748860的博客
08-29 3050
由于位置属性值fixed的设置，导致底部button部分在文档流中不占据文档流位置，所以导致底部内容被遮挡，无法正常展示。top、margin-top的区别：（此处参考其他作者，链接：https://juejin.cn/post/6986935474635931656）因为fixed元素脱离了正常文档流，所以relative元素的原本位置向上提了，产生了覆盖的行为。来使得脱离文档流的内容在文档中占据正常的文档流空间，因此fixed属性值覆盖问题得以解决！方法一：给内容设置margin-top，
APP里引用H5页面时，高度设置引起的底部白边等问题
m0_63108819的博客
04-06 2748
H5页面在app里的常见问题： 1.当H5页面高度设置为100%，设置背景色时，发现高度有内容撑开，背景色没有铺满整个背景。 2.当H5页面高度设置为100vh，设置背景色时，背景设能铺满，但是上拉时底部有白边。 3.当H5页面高度设置为最小高度为 100%或100vh，内容超出屏幕高度，上拉有调取接口时，有卡顿现象。 解决方法： 　　可以在父元素设置：　 overflow-y: auto; position: fixed; left: 0; ...
评论 17
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值