记录uniapp 高度铺满全屏的小技巧

已于 2022-11-30 16:22:30 修改
阅读量1.1w 收藏 25
点赞数 12
文章标签： uni-app 前端 vue.js
于 2022-11-30 16:16:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56930357/article/details/128116997
版权
在uniapp开发中遇到h5页面高度超出屏幕导致滚动问题，可通过在app.vue设置全局样式uni-page-body, html, body的高度为100%，并在需要全屏的页面最外层view应用.page类，设置高度100%来实现全屏铺满。
摘要由CSDN通过智能技术生成

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

解决方式如下

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

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

在需要高度铺满全屏的页面的最外层的view绑定类名page，样式为

.page {
		height: 100%;
	}

就可以实现页面高度铺满全屏了

杰瑞在哪
关注
  • 12
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
记录uniapp 高度铺满全屏的小技巧（不用去设置position: fixed定位）
高桥留de博客
10-27 2580
uniapp页面设置全屏小技巧
uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容
王佳斌
10-13 1万+
uni-app，vue.js，微信小程序 - 设置背景图自适应手机屏幕尺寸，页面中的背景图片高度和宽度自适应，UNI-APP里如何设置背景图自适应手机屏幕尺寸，如何实现一个图片铺满整个页面，并且可以根据用户机型进行自动修正，自适应背景大图片官方教程，一个页面如何将图像放到背景上，纯CSS实现，设置背景图片占满全屏，3种CSS实现背景图片全屏铺满自适应的方式，uni-app中如何让图片不带高度的自适应，兼容 uni-app 全端，支持【纯】微信小程序项目使用，uni-app - 实现全屏自适应且不变形背景大图
unaipp竖屏占满屏幕
F2691898750的博客
02-15 3145
uniapp中如果直接在页面中使用css属性height：100%是无法生效的，究其原因，是因为其根元素不具有高度，那么找到了原因，便可以解决，解决方法为： 需要在app.vue的文件中的里写上：这样就在页面根元素上设置了100%，然后任何页面需要占满屏幕高度，就直接设置height：100%即可生效。 如果是需要初始内容为100%，或不确定后续是否有添加新内容，使用min-height：100%； 或设置over竖屏占满可运用场景：APP首屏图、内容较少的登录注册及其他页面
uniapp 高度铺满全屏
cunning_of_fox的博客
04-01 1182
获取到页面的高度像素,然后把这个获取到的值给到style内就可以达到高度铺满全屏的一个状态。在需要高度铺满全屏的页面的最外层的view绑定类名page，样式为。在app.vue中设置一个公共样式。如果觉得麻烦还有一个全局高度的。OK No怕普雷 下课。
uniapp vue2 h5 video标签使用腾讯云播放器 自定义全屏ui
最新发布
weixin_74352983的博客
07-17 175
uniapp vue2 h5 使用腾讯云播放器 自定义全屏ui
uniapp-设置全屏
请叫我欧皇！的博客
07-04 3635
需求：就是想要小程序不受限制，可以把图片或者文字全屏的展示，如下图。
uniapp 适配全面屏
qq_28641023的博客
06-27 2723
1、manifest.json 文件修改。2、部分页面设置全屏（登录页面）app-plus 下 添加。
uniapp下页面布局分析——占满父元素高度
lsjweiyi的博客
04-15 4566
因为不是专业前端，是在学习过程中，感觉这个页面布局是个大难点。虽然网上找找代码抄抄也能实现效果，但是下次遇到一个类似的问题，又是不会，又要花大量时间百度。还是得搞明白其中的基础知识，才能自己解决问题，并且把代码写的优雅点。 其实还没完全搞懂，写文章记录下，方便以后查询，且写文章也能让自己滤清思路，对理解有很大的帮助。 父元素高度 首先，讲自己理解上的一个大坑：就是自己在.vue文件上新增一个根节点<view>，想让其占满整个屏幕剩余空间。设置其高度height:100%，但是发现没用： <
uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置
weixin_65363325的博客
06-03 1664
官网：https://ask.dcloud.net.cn/article/35564。
背景图片铺满全屏
02-16
html背景图片铺满全屏
使元素占满整个屏幕高度,修改swiper 圆点样式
03-29
一：微信小程序中使元素占满整个屏幕高度 在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。 宽度很简单就是width:100% 但是高度呢，我们知道的是height:100%必须是在父元素...
js全屏div铺满
06-11
js全屏div铺满
uni-app 学习： 页面高度设置100%
热门推荐
liangliangdecsdn的博客
05-18 2万+
uni-app 中页面默认没有100%，内容只显示一半,而且轮播图随内容区域一起滚动，不能固定，如下图所示： 在独立页面给page加高度100%， 此时h5页面正常但是在小程序中依旧是不起作用的，如下图： page{ height: 100%!important; } 在vue.app文件中设置设置page的高度，可解决问题，轮播图可以不随内容发生滚动，如图： page{ height: 100%; } ...
uniapp中的view高度设置100%
weixin_41463944的博客
08-05 4734
uniapp中的view高度设置100%
uniapp APP项目启动页面全屏显示去除导航栏和下巴
m0_52459016的博客
12-22 4416
uniapp APP项目启动页面全屏显示去除导航栏和下巴 <template> <view> <!-- 启动图 --> <view class="start-item" > <image :src="startImg" mode="" class="pic" @click="jump(startUrl)"></image> </view> </view> </template>
全透明状态栏，导航栏
漏光的世界
07-08 792
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.Layout
Uniapp 设置全局背景100%高度的方法
qq_50909707的博客
04-30 5608
目录 一、问题 二、设置全局变量 三、页面背景设置 四、效果展示 一、问题 在设置页面时直接设置100%是不起作用的，网上找了好多资料都不行，预上个人就从全局变量入手来设置背景高度。 二、设置全局变量 这里注意在App.vue里进行添加全局变量时，此时getApp()还未生成，可以用this.globalData来设置全局变量。因为我这里用来tabbar所以要减去tabbar的高度。 <script> export default { globalData: {},
【微信小程序】使页面使内容充满整个屏幕、height 100%不起作用的解决方案
Z_kenshou的博客
01-16 1万+
这两天做小程序启动页的时候发现在view标签上设置 height：100%；是没有作用的，其实这个问题也是经常遇到一直没太注意，这次研究了一下写几个解决方案。如下： 一、在css里面用page控制 page{ height:100%;//这样你在页面中的view设置height:100%就起作用了 } 二、height的单位用vh view{ height:100vh;//相对于视口...
uniapp高度占满全屏
08-10
要使uniapp页面的高度占满全屏，你可以按照以下步骤进行操作： 1. 在`App.vue`文件中，找到`<template>`标签，并在其内部添加一个`<view>`标签，作为页面的最外层容器。 ```html <template> <view class="app"> <!-- 页面内容 --> </view> </template> ``` 2. 在`App.vue`文件中，找到`<style>`标签，并添加一些样式来设置页面容器的高度。 ```css <style> /* 设置页面容器占满全屏 */ .app { height: 100vh; /* 使用视口高度作为高度单位 */ overflow: hidden; /* 隐藏溢出部分内容 */ } </style> ``` 这样，你的uniapp页面就会自动占满整个屏幕的高度。记得将页面的内容放在`<view class="app">...</view>`标签内部。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值