记录uniapp 高度铺满全屏的小技巧（不用去设置position: fixed定位）

最新推荐文章于 2024-07-10 11:04:38 发布
最新推荐文章于 2024-07-10 11:04:38 发布
阅读量2.4k 收藏 5
点赞数 5
分类专栏： uniapp 文章标签： uni-app 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/everMrzhong/article/details/134071703
版权
本文介绍了在uniapp中解决高度使用100vh时，h5页面出现多余滚动条的问题。通过在app.vue设置公共样式，并在需要全屏的页面最外层view添加特定样式，无需position: fixed定位，即可实现页面完美铺满。
摘要由CSDN通过智能技术生成

在uniapp中，高度使用heiht:100vh,h5的屏幕会多出一些高度，导致可以上下滑动

解决方案:

步骤一>在app.vue中设置一个公共样式


uni-page-body,html,body{  
     height: 100%;  
 }

步骤二>在需要高度铺满全屏的页面的最外层的view绑定类名page，加入以下样式:

.page {
	height: 100%;
}

这样就可以实现需要的页面不加入任何标签元素最外层div就能能满屏！ 自己去试试吧~

高桥留
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容
王佳斌
10-13 1万+
uni-app，vue.js，微信小程序 - 设置背景图自适应手机屏幕尺寸，页面中的背景图片高度和宽度自适应，UNI-APP里如何设置背景图自适应手机屏幕尺寸，如何实现一个图片铺满整个页面，并且可以根据用户机型进行自动修正，自适应背景大图片官方教程，一个页面如何将图像放到背景上，纯CSS实现，设置背景图片占满全屏，3种CSS实现背景图片全屏铺满自适应的方式，uni-app中如何让图片不带高度的自适应，兼容 uni-app 全端，支持【纯】微信小程序项目使用，uni-app - 实现全屏自适应且不变形背景大图
lightBox 简易的全屏透明遮罩解决方法
09-05
总结来说，创建全屏透明遮罩层主要依赖于CSS的`position:fixed`属性，但在IE6下需要采用一些特殊的技巧，如设置固定背景和使用CSS表达式，以确保在所有主流浏览器中都能正常工作。通过理解这些技术，开发者可以更...
HTML5 body设置自适应全屏
11-21
用什么代码实现？不允许有白色底色产生，因为手机高度不一样 设计图要标准（750）确认是背景图（通屏底图）应用场景：移动端宣传页面或者活动页面 错误的写法：加到div中结合图片设置min-height，但是页面不会回弹 终极方案 html,body{ width:100%; height:100% } body{ font-family: "华文细黑"; background:url("../img/Flyer-bg.png") no-repeat; background-size: 100%; } 一个hack方案解决垂直剧中问题 <head> <meta ch
全透明状态栏，导航栏
漏光的世界
07-08 787
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.Layout
uniapp：开发微信小程序，position: fixed布局，苹果X底部适配方案
最新发布
sunluyi的博客
07-10 182
uniapp开发微信小程序，position: fixed布局，苹果X底部适配方案。
微信小程序设置height 100% 不起作用解决办法
衡与墨的博客
09-05 1万+
https://blog.csdn.net/wshpwangshiyu/article/details/79744884 问题：小程序设置背景图片高度适应整个屏幕，设置height 100% 不起作用？ .container-all{ width: 100%; height: 100%; } .bg-img{ width: 100%; height: 100%;...
uniapp 高度铺满全屏
withkai44的博客
09-07 2137
在uniapp中，高度使用heiht:100vh,h5的屏幕会多出一些高度，导致可以上下滑动。在需要高度铺满全屏的页面的最外层的view绑定类名page，样式为。问题：在有uni-tabbar的情况下，页面铺满剩下的部分。在app.vue中设置一个公共样式。
uni-app 学习： 页面高度设置100%
热门推荐
liangliangdecsdn的博客
05-18 2万+
uni-app 中页面默认没有100%，内容只显示一半,而且轮播图随内容区域一起滚动，不能固定，如下图所示： 在独立页面给page加高度100%， 此时h5页面正常但是在小程序中依旧是不起作用的，如下图： page{ height: 100%!important; } 在vue.app文件中设置设置page的高度，可解决问题，轮播图可以不随内容发生滚动，如图： page{ height: 100%; } ...
uniapp-设置全屏
请叫我欧皇！的博客
07-04 3552
需求：就是想要小程序不受限制，可以把图片或者文字全屏的展示，如下图。
全屏视频背景：HTML和CSS
02-07
position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: -1; /* 确保视频在其他元素之下 */ } ``` 这段CSS将视频定位为固定位置，使其始终占据屏幕的底部和右侧，并通过`min-...
jQuery鼠标移动全屏图片切换代码
06-24
在jQuery中，可以通过修改图片的CSS属性来实现全屏展示，如设置`position: fixed`让图片始终覆盖整个浏览器窗口。 最后，关于“jiaoben6526”这个文件名，它可能是指包含实现上述功能的源代码文件或者示例项目的...
Full-screen-video-background:全屏视频背景
07-16
这段CSS代码将视频定位到页面底部右侧，并设置其最小宽度和高度为100%，确保视频始终填充整个视口。`z-index: -1;`是为了让视频位于其他内容的下方，避免遮挡文本或其他元素。 为了兼容不同浏览器，我们可能需要...
uniapp 适配全面屏
qq_28641023的博客
06-27 2664
1、manifest.json 文件修改。2、部分页面设置全屏（登录页面）app-plus 下 添加。
uni-app 全面屏webview以及页面如何占满（ios开发）
weixin_45602368的博客
09-26 1409
manifest.json 文件 app-plus 节点下配下 safearea。h5页面的配置viewport-fit=cover。需要全屏的元素/webview需要规定高度。
unaipp竖屏占满屏幕
F2691898750的博客
02-15 3109
uniapp中如果直接在页面中使用css属性height：100%是无法生效的，究其原因，是因为其根元素不具有高度，那么找到了原因，便可以解决，解决方法为： 需要在app.vue的文件中的里写上：这样就在页面根元素上设置了100%，然后任何页面需要占满屏幕高度，就直接设置height：100%即可生效。 如果是需要初始内容为100%，或不确定后续是否有添加新内容，使用min-height：100%； 或设置over竖屏占满可运用场景：APP首屏图、内容较少的登录注册及其他页面
记录uniapp 高度铺满全屏的小技巧
qq_56930357的博客
11-30 1万+
在uniapp中，高度使用heiht:100vh,h5的屏幕会多出一些高度，导致可以上下滑动。在需要高度铺满全屏的页面的最外层的view绑定类名page，样式为。找了很多解决方法，终于是找到了！在app.vue中设置一个公共样式。就可以实现页面高度铺满全屏了。
uniapp页面高度设置
m0_37322058的博客
08-11 7930
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码...
uniapp页面布局的高度，可使用高度
weixin_44881623的博客
06-07 566
通过uni.getSystemInfo获取到的高度中，screenHeight屏幕高度会超过屏幕最大高度所以会出现滚动条，windowHeight可使用高度中包含了statusBarHeight状态栏高度在写页面时往往不是很友好，最合适的高度可能就是windowHeight - statusBarHeight - （自定义导航栏的高度）。建议在小程序开发时再减去距离底部安全距离的高度。
position:fixed遮盖住tinymce的全屏
02-29
position:fixed是CSS中的一个定位属性，它可以使元素相对于浏览器窗口固定位置显示。而tinymce是一个富文本编辑器，它提供了全屏编辑的功能。 当position:fixed的元素遮盖住tinymce的全屏时，可能是因为position:fixed的元素的层级（z-index）比tinymce的全屏层级低，导致被覆盖。 解决这个问题的方法是通过设置position:fixed元素的层级高于tinymce的全屏层级，可以使用CSS的z-index属性来实现。确保position:fixed元素的z-index值大于tinymce的全屏层级即可。 另外，还可以考虑使用JavaScript来动态调整position:fixed元素和tinymce全屏之间的层级关系，以确保它们之间不会相互遮盖。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高桥留

打赏更新更快！质量更好！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值