uniapp页面高度设置(铺满可视区域、顶部状态栏高度、底部导航栏高度)

news/2025/1/15 12:49:42/

这里说几种在uniapp开发中,关于页面设置高度的几种情况。宽度就不说了哈,宽度设置百分比都会生效。

首先我们要知道平时开发中,如果说没在uniapp做特殊处理,即正常情况下,所有的页面(.vue文件)中都是没有高度的(和vue一样),也就是说给最外层的的view标签设置高度为100%是没啥作用的,只要没内容高度依然是0

1. 对高度没要求

对高度没有要求的意思就是,我们不需要关心页面的高度,直接编写内容即可,这样页面高度会根据内容自动扩大,当超出可视区域后,会自动产生滚动条,这种没啥说的,正常开发即可。

2. 希望项目中所有的页面的可视区域都100%填满

意思就是说,希望在平时的开发中,任何一个页面,只要给最外层的view标签设置了100%高度,那么当前的页面直接填满。要实现这一点其实很方便,我们只需要在App.vue中的style标签中添加如下代码即可:

App.vue 的 <style lang="scss"></style>中 

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

设置完以后,我们在开发的页面直接这样编写即可填满:


http://www.ppmy.cn/news/1563318.html

相关文章

cmake 编译ffmpeg的Android 的 so文件的cmake内容

确保你的开发环境已经设置好&#xff0c;包括安卓NDK和相应版本的FFmpeg源码。 下载并配置FFmpeg源码。 git clone https://git.ffmpeg.org/ffmpeg.gitcd ffmpeg 使用NDK-build或者cmake来编译FFmpeg。 5. 在ffmpeg路径下&#xff0c;新建build.sh , 下载MYSYS&#xff0c…

设计模式-结构型-组合模式

1. 什么是组合模式&#xff1f; 组合模式&#xff08;Composite Pattern&#xff09; 是一种结构型设计模式&#xff0c;它允许将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端对单个对象和组合对象的使用具有一致性。换句话说&#xff0c;组合模式允…

亿道三防丨三防笔记本是什么意思?和普通笔记本的优势在哪里?

三防笔记本是什么意思&#xff1f;和普通笔记本的优势在哪里&#xff1f; 在现代社会中&#xff0c;笔记本电脑已经成为人们工作和生活中不可或缺的一部分。然而&#xff0c;在一些特殊行业或环境中&#xff0c;普通笔记本电脑由于其脆弱性和对环境条件的敏感性&#xff0c;往…

夯实前端基础之CSS篇

知识点概览 这一篇是讲CSS的&#xff0c;前面还有一篇总结HTML的哦~夯实前端基础之HTML篇&#xff0c;后面还会更新其他系列哦~ 一、必知必会 1. html中引入样式的几种方式&#xff1f; 内联样式&#xff08;html元素的style属性&#xff09;内部样式表&#xff08;style标签…

RAG 带来的一些问题

RAG (Retrieval-Augmented Generation) 提高了查询的准确性&#xff0c;但也引入了一些新的问题。主要问题集中在信息检索和生成模型的结合方式上&#xff0c;这些问题影响了系统的性能、效率和输出质量。以下是 RAG 带来的主要问题以及相应的解决方法。 1. 依赖外部检索系统的…

RabbitMQ 在 Spring Boot 项目中的深度应用与实战解析

RabbitMQ 在 Spring Boot 项目中的深度应用与实战解析 引言 RabbitMQ 作为一款广受欢迎的开源消息队列系统&#xff0c;遵循 AMQP 协议&#xff0c;能够在分布式系统里实现应用程序之间的异步通信、解耦以及流量削峰等关键功能。在 Spring Boot 项目中集成 RabbitMQ&#xff…

C# 25Dpoint

C# 25Dpoint &#xff0c;做一个备份 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace _25Dpoint {public partial cl…

JAVA:Spring Boot 集成 JWT 实现身份验证的技术指南

1、简述 在现代Web开发中&#xff0c;安全性尤为重要。为了确保用户的身份&#xff0c;JSON Web Token&#xff08;JWT&#xff09;作为一种轻量级且无状态的身份验证方案&#xff0c;广泛应用于微服务和分布式系统中。本篇博客将讲解如何在Spring Boot 中集成JWT实现身份验证…