关于小程序设置高度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;就行,尤其是当追寻其上层父、祖、曾祖元素复杂较多时,直接用视窗单位,就免去了很多麻烦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1549982.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

改善大模型 RAG 效果:结合检索和重排序模型

最近这一两周不少大厂都已经开始秋招面试了。 不同以往的是,当前职场环境已不再是那个双向奔赴时代了。求职者在变多,HC 在变少,岗位要求还更高了。 最近,我们又陆续整理了很多大厂的面试题,帮助一些球友解惑答疑&am…

苹果退出OpenAI融资谈判

🦉 AI新闻 🚀 苹果退出OpenAI融资谈判 摘要:据《华尔街日报》报道,苹果公司已决定不参与OpenAI的新一轮融资,计划筹集约65亿美元(约454.98亿元人民币)。OpenAI正进行从非营利到盈利性公司的转…

【图解秒杀系列】秒杀技术点——隔离、熔断、限流、降级

【图解秒杀系列】秒杀技术点——隔离、熔断、限流、降级 隔离熔断限流降级 隔离 隔离的思想其实就是舱壁模式,这在Docker中有所体现。在Docker中,容器与容器间互相隔离互不影响。一个容器有它独立的与外界隔离的环境与资源,包括CPU、内存等&…

AI读教链《关于美国、中国和BTC的三个超级变量​》

这篇文章探讨了美国、中国及比特币(BTC)当前经济形势中的三个超级变量,强调了对经济状况的重新审视。 美国经济与衰退:尽管有观点认为美国经济正在衰退,文章指出这取决于如何定义衰退。美股市场的市盈率处于高位&#…

实用工具推荐---- PDF 转换

直接上链接:爱PDF |面向 PDF 爱好者的在线 PDF 工具 (ilovepdf.com) 主要功能如下: 全免费!!!!

低功耗4G模组Air780E的串口通信指南

今天我们来讲解低功耗4G模组Air780E的串口通信的基本用法,合宙的小伙伴们,学起来吧! 一、硬件准备 780E开发板一套,包括天线、USB数据线。 USB转TTL工具或线(例如ch340、ft232) PC电脑,串口…

【系统方案】智慧城市大数据平台建设方案(Word)

第1章 总体说明 1.1 建设背景 1.2 建设目标 1.3 项目建设主要内容 1.4 设计原则 第2章 对项目的理解 2.1 现状分析 2.2 业务需求分析 2.3 功能需求分析 第3章 大数据平台建设方案 3.1 大数据平台总体设计 3.2 大数据平台功能设计 3.3 平台应用 第4章 政策标准保障体系 4.1 政策…

零基础学习AI大模型,手把手带你从入门到实践!看过的已经月入6w了!

引言: 在2024年这个充满挑战的就业市场环境下,许多人都在寻求掌握一门技术以增强自己的竞争力,但往往不知道该选择学习什么。今年,学习人工智能无疑是一个明智的选择。 对于外行人而言,AI可以被理解为一种模拟人类智…

【ASE】第四课_护盾效果(有碰撞效果)

今天我们一起来学习ASE插件,希望各位点个关注,一起跟随我的步伐 今天我们来学习护盾的效果。 思路: 1.添加纹理贴图和法线贴图(这里省略) 2.添加护盾边缘顶点扰动效果,也可以理解成变形效果 3.添加碰撞…

远程服务器安装anaconda并创建虚拟环境

1、承接上文新用户zrcs,在服务器的zrcs文件夹下直接下载anaconda(很慢): wget https://repo.anaconda.com/archive/Anaconda3-2024.06-1-Linux-x86_64.sh 或者选择本地下载,清华大学开源软件镜像站:https:/…

德克威尔FS系列一体式PROFINET协议模块组态步骤

1、通讯连接图 2、硬件配置 3、安装GSD文件 4、新建工程与设备组态 1 打开TIA Portal V16,选择新建工程并组态。 2.组态设备,切换到网络视图窗口中,右侧展开硬件目录,选择PN-HH00-C1NN拖拽到网络视图中。 3.在网络视图中为远程IO模块分配控制器,鼠标单击IO模块中“未分配”…

VSCode 中配置 C/C++ 环境的步骤

VSCode 中配置 C/C 环境的步骤 1. 安装 VSCode 1、下载位置 https://code.visualstudio.com/Download2、安装 正常操作步骤,同意协议,下一步,点击完成即可 2. 安装 C/C 扩展 打开 VSCode。 点击左侧的扩展图标(或使用快捷键…

【经验技巧】如何做好S参数的仿测一致性

根据个人经验,想要做好电路板S参数的仿测一致性,如下的相关信息必须被认真对待: 1. PCB叠构(Stack up),仿真模型需要保证设计参数与板厂供应商的生产参数完全一样,这些参数包括: 叠层结构数据;介电常数;损耗因子;蚀刻因子;表面粗糙度。 2. 仿真中,需要保证信号测试…

大数据-154 Apache Druid 架构与原理详解 基础架构、架构演进

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…

【漏洞复现】孚盟云oa AjaxSendDingdingMessage接口 存在sql注入漏洞

》》》产品描述《《《 孚盟与阿里强强联手将最受青睐的经典C系列产品打造成全新的孚盟云产品,让用户可以用云模式实现信息化管理,让用户的异地办公更加流畅,大大降低中小企业在信息化上成本,用最小的投入享受大型企业级别的信息化…

AI数字人:终于知道视频号咋爆的了

点击下方👇“拂晓AI数字人”关注公众号 一起学习AI 数字人,让服务更高效! 做视频号是不是有这种感觉,辛辛苦苦剪了几个小时的视频,上去就是几百播放量,就没有流量了,很抓狂。 找别人的爆的视频&…

等保2.0标准执行之高风险判定(物理环境篇)

2019年5月13日下午,国家标准新闻发布会新闻发布厅召开,网络安全等级保护2.0系列核心标准在千呼万唤中终于正式发布,等保2.0时代又迈出坚实一步。 等级保护2.0标准发布后,对广大等级保护测评机构的工作提出了更高的要求&#xff0…

【含文档】基于Springboot+Vue的个人博客系统(含源码+数据库+lw)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统定…

基于AM6254+FPGA的车载中控板,支持PC104,QNX, VXWORKS

Specification Description 处理器 TI AM625X at up to 1.4GHz 操作系统 LINUX, VXWORKS 存储 2GB DDR4, 2 x128GB EMMC, TF卡座,128Mb QSPI 接口 •标准PC104接口 •2个USB2.0 •1路VGA显示 •2路10/100/1000 Mbps ETH •1路10/1…

喜讯!宝兰德荣获第三届“鼎新杯”数字化转型应用大赛二等奖

9月24日-25日,“2024数字化转型发展大会”在北京成功举办。来自政产学研用的专家学者、知名企业代表同台论道,共话数字化转型的新趋势。大会期间,备受瞩目的第三届“鼎新杯”数字化应用转型大赛结果正式揭晓,「宝兰德中间件统一管…