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

已于 2022-11-30 16:22:30 修改
阅读量1.1w 收藏 22
点赞数 11
文章标签： 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中，高度使用heiht:100vh,h5的屏幕会多出一些高度，导致可以上下滑动

解决方式如下

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

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

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

.page {
		height: 100%;
	}

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

杰瑞在哪
关注
  • 11
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
记录uniapp 高度铺满全屏的小技巧（不用去设置position: fixed定位）
高桥留de博客
10-27 2328
uniapp页面设置全屏小技巧
uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容
热门推荐
王佳斌
10-13 1万+
uni-app，vue.js，微信小程序 - 设置背景图自适应手机屏幕尺寸，页面中的背景图片高度和宽度自适应，UNI-APP里如何设置背景图自适应手机屏幕尺寸，如何实现一个图片铺满整个页面，并且可以根据用户机型进行自动修正，自适应背景大图片官方教程，一个页面如何将图像放到背景上，纯CSS实现，设置背景图片占满全屏，3种CSS实现背景图片全屏铺满自适应的方式，uni-app中如何让图片不带高度的自适应，兼容 uni-app 全端，支持【纯】微信小程序项目使用，uni-app - 实现全屏自适应且不变形背景大图
uniapp 高度铺满全屏
cunning_of_fox的博客
04-01 729
获取到页面的高度像素,然后把这个获取到的值给到style内就可以达到高度铺满全屏的一个状态。在需要高度铺满全屏的页面的最外层的view绑定类名page，样式为。在app.vue中设置一个公共样式。如果觉得麻烦还有一个全局高度的。OK No怕普雷 下课。
unaipp竖屏占满屏幕
F2691898750的博客
02-15 2978
uniapp中如果直接在页面中使用css属性height：100%是无法生效的，究其原因，是因为其根元素不具有高度，那么找到了原因，便可以解决，解决方法为： 需要在app.vue的文件中的里写上：这样就在页面根元素上设置了100%，然后任何页面需要占满屏幕高度，就直接设置height：100%即可生效。 如果是需要初始内容为100%，或不确定后续是否有添加新内容，使用min-height：100%； 或设置over竖屏占满可运用场景：APP首屏图、内容较少的登录注册及其他页面
uniapp开发安卓不能铺满全屏问题
最新发布
qq_40358970的博客
05-14 257
【代码】uniapp开发安卓不能铺满全屏问题。去除头部栏，去除底部安全空白区域
uniapp-设置全屏
请叫我欧皇！的博客
07-04 3185
需求：就是想要小程序不受限制，可以把图片或者文字全屏的展示，如下图。
uniapp:如何实现点击图片可以全屏展示预览
m0_65069237的博客
11-22 2329
这个需要使用uniapp中的api：uni.previewImage，使用方法如下。这样就可以实现照片的预览和全屏展示了。
uniapp页面高度100vh出现滚动条
weixin_62639453的博客
01-06 1236
问题描述：页面内容元素不多，一页足以装的下，但是又不希望页面出现滚动条，只让他保持一页展示即可。本来想让页面铺满没有溢出产生滚动条，但是实际进行开发的时候发现就算给了页面最大的父亲盒子高度10vh（实际屏幕尺寸），还是会产生滚动条。
uniapp nvue占满全屏样式
米六的博客
12-30 3690
.最外层盒子的id/class { width:750rpx; flex:1; } nvue的css仅支持flex布局，nvue的css仅支持flex布局 (官方原话)
背景图片铺满全屏
02-16
html背景图片铺满全屏
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js全屏div铺满
06-11
js全屏div铺满
铺满全屏玫瑰
07-02
铺满全屏玫瑰花
使元素占满整个屏幕高度,修改swiper 圆点样式
03-29
一：微信小程序中使元素占满整个屏幕高度 在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。 宽度很简单就是width:100% 但是高度呢，我们知道的是height:100%必须是在父元素...
解决给uniapp页面最外层容器设置height:100%无效问题
kwroi的博客
11-23 2914
给uniapp页面最外层容器设置height:100%无效，设置100vh会因为顶部导航超出视口。
Uniapp页面设置宽高100%
weixin_42216094的博客
02-11 6920
如何设置uniapp的页面宽高为100%。
uniapp: webview全屏遮挡住状态栏的解决方案
爱拼才会赢～的博客
03-19 1万+
什么是webview？ 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个屏幕。用通俗的话来说，他就是一个“载体、桥梁”，把App与h5给结合起来， 我们通常在项目中一般是把h5页面嵌套在app中使用，实现前端的混合式开发。 产生问题的原因以及效果展示 上面我们说过，webview会自动铺满整个屏幕，所以这就导致了一些问题，比如今天，给大家所分享的 “ 遮住导航栏的问题 ”。在我们项目开发过程中，导航栏都是由h5这边写的，所以在uniapp中不需要设置导航栏，所以就让titleNVie
Vue uniapp实现图片宽度100%、高度自适应的效果
qq_52099965的博客
03-26 1万+
Vue uniapp实现图片宽度100%、高度自适应的效果
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>`标签内部。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值