关于小程序设置高度height为100%不起作用的问题

关于在小程序中设置元素CSS的height高度为100%,有些情况管用,而有些情况下不管用,会有留白。主要原因还是跟父元素的height高度设置有关,作如下讨论(本节讨论指正常流下高度设置,其他非正常流如浮动等不适应此讨论):

一、三个高度单位(即视窗单位与坐标单位)的区别

**坐标单位:**是指绝对单位,一般与手机分辨率有关。对于网页,以px为单位,对于小程序以rpx为单位。

**视窗单位:**是指能能看到的手机界面窗口大小,它是一个比例单位,综合手机分辨率和大小,将整个界面高度和宽度分为100份,高度上是1vh=1%界面高度,宽度上是1vw=1%界面宽度。

**相对百分比单位:**如100%、50%,是指相对其父元素高度或宽度的百分比。这里有个易产生误区,以100%就是视窗100%,要分清楚。

二、当前父元素高度设置为0时

不管当前元素怎么设置,它和它的子元素都会显示不出来。

三、当前父元素高度设置为大于0的固定值时

当父元素没有设置为一个大于0的固定值时,当前元素及其兄弟单位之和不能超显示出父元素范围,当超出时只能隐藏或滚动下显示。

四、当前父元素高度没有设置时

当前父元素高度没有设置时,系统默认为0,但不是指没有显示的那种,是有弹性的0。也就是说,只要父元素有子元素高度,就可以将父元素撑开。所以,针对本文开章提问,有时100%不能显示出满屏高度就是指这种情况。有如下两个解决办法:

解决办法一:

这时,若要想父元素的子元素100%达到满屏高度,就需要设置父元素设为100%。如果父元素不是page页,就要依次往上找更上一层父元素设CSS的height为100%,至到page的height也设为100%。

解决办法二:

在当前元素CSS中用视窗单位来表示,直接写成height:100vh;就行,尤其是当追寻其上层父、祖、曾祖元素复杂较多时,直接用视窗单位,就免去了很多麻烦。

相关推荐
投票竞赛9 小时前
6 类细分场景在线投票工具,微信小程序亲测测评精准匹配对应评选需求
小程序
这是个栗子1 天前
uni-app微信小程序开发:高频核心 API(三)
微信小程序·小程序·uni-app
quweiie1 天前
thinkphp8结合jwt与微信小程序接口鉴权
微信小程序·小程序·thinkphp接口·接口鉴权
黄华SJ520it2 天前
预约上门系统开发:懒人经济下的商业机遇与技术实践
小程序·系统开发
软件技术新观察2 天前
2026年北京教育医疗小程序与APP定制开发:十大服务商实力测评
大数据·小程序
万岳科技程序员小金2 天前
真人数字人小程序如何开发?AI数字人平台搭建流程全面解析
人工智能·小程序·ai数字人系统源码·ai数字人平台搭建·ai数字人小程序开发
言乐63 天前
Python实现可运行解密游戏游戏框架
python·游戏·小程序·游戏程序·关卡设计
2501_915106323 天前
iOS 软件测试工具性能监控、日志分析 KeyMob、Instruments等
android·ios·小程序·https·uni-app·iphone·webview
云迈科技-软件定制开发3 天前
2026 AI智能体小程序APP开发怎么做:从场景规划到上线交付的完整参考
大数据·人工智能·小程序
小码哥0683 天前
医院陪诊小程序怎么开发-医院陪诊小程序源码功能-微信小程序 医院健康陪诊陪护系统
微信小程序·小程序·医院陪诊·陪诊系统·陪诊陪诊