当前位置： 首页 > news >正文

CSS3新增的视口单位Vh、Vw单位

news 文章来源：https://blog.csdn.net/weixin_42274805/article/details/129235320 2024/11/19 10:22:18

定义

vw：浏览器可见视口【宽度】的百分比（1vw代表视窗【宽度】的1%）
vh：浏览器可见视口【高度】的百分比（1vw代表视窗【高度】的1%）
vmin：当前 vw 和 vh 较小的一个值。
vmax：当前 vw 和 vh 中较大的一个值。

视窗 与 可见视口 是一个意思。

VH

css3新增的一个相对长度单位。相对于视窗的高度, 视窗被均分为100单位的vh，即1vh永远等于当前视窗高度的百分之一。

  • 视窗所指为浏览器内部的可视区域大小， 即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

  • 因此，100vh就等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。

  • 设置height:100vh，不论元素没有内容，该元素都会被撑开与屏幕高度一致

<body><div style="background-color: red; height: 100vh;"></div>
</body>
<style>* {padding: 0;margin: 0;}
</style>

在容器里面，vh照样生效

<body><div style="height:200px;overflow: visible;"><div style="background-color: red; height: 100vh;"></div></div>
</body>

在多深的容器层里依然生效

  <body><div style="height: 300px; overflow: visible"><div style="height: 200px; overflow: visible"><div style="height: 100px; overflow: visible"><div style="background-color: red; height: 100vh"></div></div></div></div></body>

应用场景：

<body><header style="height:200px;background-color: green;">头部</header><div style="height:calc(100vh - 200px);background-color: blue;">内容</div>
</body>

VW

同vh

附录：与%的区别

  • % 是基于【父元素】的宽度/高度的百分比，vw，vh是根据视窗的宽度/高度的百分比。

  • 视口单位优势在于【vh】能够直接获取高度，而用 % 在没有设置 body 高度情况下，是无法正确获得可视区域的高度。

相关文章：

CSS3新增的视口单位Vh、Vw单位

定义vw&#xff1a;浏览器可见视口【宽度】的百分比&#xff08;1vw代表视窗【宽度】的1%&#xff09;vh&#xff1a;浏览器可见视口【高度】的百分比&#xff08;1vw代表视窗【高度】的1%&#xff09;vmin&#xff1a;当前 vw 和 vh 较小的一个值。vmax&#xff1a;当前 vw 和…...

编程日记 2023/2/27 14:08:47

【Linux】yum安装docker指定版本

&#x1f341;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; 文章目录卸载已有的docker部署指定版本docker安…...

编程日记 2023/2/27 14:07:41

SpringBoot相关操作

01-今日内容 Spring概述、快速入门SpringBoot配置SpringBoot整合 02-SpringBoot概述 SpringBoot提供了一种快速使用Spring的方式&#xff0c;基于约定优于配置的思想&#xff0c;可以让开发人员不必在配置与逻辑业务之间进行思维的切换&#xff0c;全身心的投入到逻辑业务的…...

编程日记 2023/2/27 14:06:36

Python super()函数：调用父类的构造方法

Python 中子类会继承父类所有的类属性和类方法。严格来说&#xff0c;类的构造方法其实就是实例方法&#xff0c;因此毫无疑问&#xff0c;父类的构造方法&#xff0c;子类同样会继承。 但我们知道&#xff0c;Python 是一门支持多继承的面向对象编程语言&#xff0c;如果子类…...

编程日记 2023/2/27 14:05:31

@ConfigurationProperties在方法上的使用

文章目录1. 前言2. 先说结论3. 代码解释1. Component ConfigurationProperties2. EnableConfigurationProperties ConfigurationProperties3. Bean ConfigurationProperties1. 前言 在学习spring的时候&#xff0c;ConfigurationProperties应该经常被使用到&#xff0c;作用…...

编程日记 2023/2/27 14:04:24

【QT】如何查找和获取界面上的子部件（findChild 和 findChidren）

目录1. findChild()函数2. findChildren()函数3. 示例1. findChild()函数 函数原型&#xff1a; T QObject::findChild(const QString &name QString(), Qt::FindChildOptions options Qt::FindChildrenRecursively) const返回该对象的子对象&#xff0c;该子对象可以转…...

编程日记 2023/2/27 14:03:16

MIT 6.S081学习笔记

计划花25天时间学完6.S081课程&#xff0c;从2月20日-3月20日。课程主页Link   xv6 book   GDB User Manual Lecture 1: Introduction and Examples课程主题&#xff1a;设计和实现操作系统   OS的三大功能&#xff1a;多路复用、隔离和交互。 Lab: Xv6 and Unix utiliti…...

编程日记 2023/2/27 14:02:09

《网络安全入门到精通》 - 2.1 - Windows基础 - DOS命令Windows防火墙Windows共享文件

「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「订阅专栏」&#xff1a;此文章已录入专栏《网络安全入门到精通》 Windows基础一、DOS命令1、目录文件操作dir 列出目录文件cd 切换目录md 创建目录rd 删除目录move 移动文件或目…...

编程日记 2023/2/27 14:01:04

八、Vben框架动态生成可编辑Table

开发过程中产品经理提出了一些奇怪的需求&#xff0c;让人很摸不着头脑&#xff0c;一问就是客户的需求就是这样&#xff0c;那么我们开发只能想各种办法啦。 最近就提出了两个需求&#xff0c; 第一个是需要在日期选择的时候根据时间选择的不同让底下table中增加两个时间中间的…...

编程日记 2023/2/27 13:59:59

浅谈ERP数据的重要性

影响一个ERP项目的因素有很多&#xff0c;数据无疑是其中很重要的一项,正所谓“正确的诊断源于准确的信息&#xff0c;准确的信息基于可靠的采集”&#xff0c;当我们抓住数据这个根基&#xff0c;大处着眼&#xff0c;小处着手的时候&#xff0c;我们距离ERP成功的日子就不会太…...

编程日记 2023/2/27 13:58:52

【RabbitMQ笔记06】消息队列RabbitMQ七种模式之Topics主题模式

这篇文章&#xff0c;主要介绍消息队列RabbitMQ七种模式之Topics主题模式。 目录 一、消息队列 1.1、主题模式&#xff08;Topics&#xff09; 1.2、案例代码 &#xff08;1&#xff09;引入依赖 &#xff08;2&#xff09;编写生产者 &#xff08;3&#xff09;编写消费…...

编程日记 2023/2/27 13:57:42

ChatGPT似乎有的时候并不能搞懂Java的动态分派，你懂了吗？

目录 碎碎念 ChatGPT 中出现的问题 那么正确答案应该是什么呢&#xff1f; 分派的相关知识点总结&#xff1a; 分派是什么&#xff1f; 静态分派与动态分派&#xff1a; Java语言是静态多分派&#xff0c;动态单分派的&#xff1b; 静态分派&#xff1a;静态重载多分派…...

编程日记 2023/2/27 13:56:33

【C++初阶】vector的模拟实现

大家好我是沐曦希&#x1f495; 文章目录一、前言二、无参构造&析构三、基础接口1.empty和clear2.size和capacity3.[]和iterator四、reserve和resize五、尾插尾删六、其他构造1.迭代器区间构造2.拷贝构造七、memcpy问题八、完整代码一、前言 在模拟实现容器时候&#xff0…...

编程日记 2023/2/27 13:55:26

微信小程序、小游戏的流量主一般可以赚多少钱？

本篇文章主要科普小程序、小游戏流量主一般赚钱的实际情况&#xff0c;通过在下长期运营的经验汇总而成。 日期&#xff1a;2023年2月26日 作者&#xff1a;任聪聪 小程序、小程序满1000用户后即可开通流量主&#xff0c;但实际上很多人并没有传说中的那种日赚几千的流量收入的…...

编程日记 2023/2/27 13:54:22

jni-Demo-基于linux（c++ java）

跑一个jni 的最简单的Demo需要提前准备 VsCode 编译器、win10下&#xff0c;vscode中集成linux操作系统、c编译器&#xff08;gcc、g&#xff09;&#xff0c;java编译器&#xff08;jdk1.8&#xff09;参考&#xff1a;https://mangocool.com/1653030123842.htmlJniDemo类&…...

编程日记 2023/2/27 13:53:14

指针的进阶——（1）

本次讲解重点&#xff1a; 1、字符指针 2、数组指针 3、指针数组 4、数组传参和指针传参 5、函数指针 关于指针这个知识点的主题&#xff0c;我们在前面已经初级阶段已经对指针有了大致的理解和应用了。我们知道了指针的概念&#xff1a; 1、指针就是地址&#xff0c;但口…...

编程日记 2023/2/27 13:52:06

电商平台的促销活动如何抵御大流量的ddos攻击

每一次活动大促带来的迅猛流量&#xff0c;对技术人而言都是一次严峻考验。如果在活动期间遭受黑产恶意 DDoS 攻击&#xff0c;无疑是雪上加霜。电商的特性是业务常态下通常不会遭受大流量 DDoS 攻击&#xff0c;且对延迟敏感&#xff0c;因此只需要在活动期间按需使用 DDoS 防…...

编程日记 2023/2/27 13:51:00

代码随想录-48-104. 二叉树的最大深度

目录前言题目1.层序迭代思路2. 本题思路分析&#xff1a;3. 算法实现4. pop函数的算法复杂度5. 算法坑点前言 在本科毕设结束后&#xff0c;我开始刷卡哥的“代码随想录”&#xff0c;每天一节。自己的总结笔记均会放在“算法刷题-代码随想录”该专栏下。 代码随想录此题链接 …...

编程日记 2023/2/27 13:49:53

【Vue3源码】第六章 computed的实现

【Vue3源码】第六章 computed的实现 上一章节我们实现了 ref 及其它配套的isRef、unRef 和 proxyRefs API。这一章开始实现computed计算属性。 认识computed 接受一个 getter 函数&#xff0c;返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。…...

编程日记 2023/2/27 13:48:47

Java基础之注解

3.注解 3.1概述【理解】 概述 对我们的程序进行标注和解释 注解和注释的区别 注释: 给程序员看的注解: 给编译器看的 使用注解进行配置配置的优势 代码更加简洁,方便 3.2自定义注解【理解】 格式 public interface 注解名称 { ​ public 属性类型 属性名() default 默认值…...

编程日记 2023/2/27 13:47:40

三、线性表

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 自学JAVA数据结构笔记&#xff0c;跟学视频为&#xff1a;黑马程序员Java数据结构与java算法全套教程…...

编程日记 2023/2/27 13:46:33

C++统计方形

统计方形 内存限制&#xff1a;256 MB 时间限制&#xff1a;1 S 题目描述 有一个n*m方格的棋盘&#xff0c;求其方格包含多少正方形、长方形&#xff08;此处长方形不包含正方形&#xff09; 输入格式 输入存在多组测试数据。每组测试数据输入两个整数n,m&#xff0c;数字不超…...

编程日记 2023/2/27 13:45:27

Tina_Linux配网开发指南

OpenRemoved_Tina_Linux_配网_开发指南 1 概述 1.1 编写目的 介绍Allwinner 平台上基于wifimanager-v2.0 的WiFi 配网方式&#xff0c;包括softap(WiFi ap 模式热点配网),soundwave(声波配网),BLE(蓝牙低功耗配网)。 1.2 适用范围 • allwinner 软件平台tina v5.0 版本及以…...

编程日记 2023/2/27 13:44:18

高频面试题|RabbitMQ如何防止消息的重复消费？

一. 前言最近有很多小伙伴开始找工作&#xff0c;在面试时&#xff0c;面试官经常会问我们这样一个题目&#xff1a;RabbitMQ如何防止重复消费?有很多小伙伴这个时候都在想&#xff0c;消息怎么还会重复消费呢???.......所以他们在面试后就跑来问壹哥&#xff0c;针对这个比…...

编程日记 2023/2/27 13:43:12

黑盒测试用例设计方法-边界值分析法

目录 一、边界值定义 二、边界值的考虑 三、边界值的优化 四、边界值的设计用例的步骤 五、案例 六、边界值的类型 一、边界值定义 边界值分析法就是对输入或输出的边界值进行测试的一种黑盒测试方法。通常边界值分析法是作为对等价类划分法的补充&#xff0c;这种情况下…...

编程日记 2023/2/27 13:42:06

项目风险管理中不可忽视的5个关键点

1、风险意识非常重要 项目经理必须要有风险意识&#xff0c;并不是项目计划做好就万事大吉&#xff0c;而是需要对项目风险进行预判&#xff0c;时刻保持风险意识&#xff0c;及时发现和处理项目风险。 项目风险管理关键&#xff1a;风险意识​ 2、建立组织风险资产库 寻…...

编程日记 2023/2/27 13:40:59

Linux-＞进程地址空间

目录 前言&#xff1a; 1. 程序地址空间回顾 2. 进程空间是什么 3. 进程地址空间与内存 4. 进程地址空间和内存的关联 5. 为什么要有进程地址空间 前言&#xff1a; 我们在平时学习的过程当中总是听到栈、堆、代码段等等储存空间&#xff0c;但是这些东西到底是什么&…...

编程日记 2023/2/27 13:39:52

【奶奶看了也不会】AI绘画 Mac安装stable-diffusion-webui绘制AI妹子保姆级教程

1.作品图 2.准备工作 目前网上能搜到的stable-diffusion-webui的安装教程都是Window和Mac M1芯片的&#xff0c;而对于因特尔芯片的文章少之又少&#xff0c;这就导致我们还在用老Intel 芯片的Mac本&#xff0c;看着别人生成美女图片只能眼馋。所以小卷这周末折腾了一天&#…...

编程日记 2023/2/27 13:38:44

基于stm32电梯管理系统设计

基于stm32电梯管理系统设计这里记录一下以前自己做的嵌入式课程设计&#xff0c;报告中的图片和文字太多了&#xff0c;全部一个一个把搬过来太麻烦了,需要完整文本和代码自行q我963160156&#xff0c;也可在微信公众号 *高级嵌入式软件* 里回复 *电梯* 查看完整版文章摘要关键…...

编程日记 2023/2/27 13:37:31

Spring中的FactoryBean 和 BeanFactory、BeanPostProcessor 和BeanFactoryPostProcessor解析

文章目录FactoryBean 和 BeanFactory后置处理器BeanPostProcessor 和 BeanFactoryPostProcessorBeanPostProcessorBeanFactoryPostProcessorFactoryBean 和 BeanFactory BeanFactory接⼝是容器的顶级接⼝&#xff0c;定义了容器的⼀些基础⾏为&#xff0c;负责⽣产和管理Bean的…...

编程日记 2023/2/27 13:36:26

分销系统什么意思/安徽seo网络优化师

简单的C语言编辑器课程设计《编译原理》课程设计简单的C语言编译器6 -扬 州 大 学编译原理课程设计报告题 目题 目 简单的编译器班 级 计科0802班学 号 081202427姓 名 张 俊指导教师 姜 卯 生成 绩扬州大学信息工程学院2011课程设计题目实现一个简单的编译器课程设计目的通过编…...

编程日记 2024/11/19 10:03:35

网站找谁做/美国新冠疫情最新消息

Maven 进阶Maven 依赖机制传统方式Maven 的方式解释说明Maven POMPOM 的例子Maven 插件插件类型Maven 快照什么是快照&#xff1f;快照与版本Maven 依赖机制 在 Maven 依赖机制的帮助下自动下载所有必需的依赖库&#xff0c;并保持版本升级。让我们看一个案例研究&#xff0c;…...

编程日记 2024/11/19 9:09:14

天水做网站的公司/网站建设合同模板

相信很多从事js开发的朋友都或多或少了解一些有关js闭包&#xff08;closure&#xff09;的知识。 本篇文章是从小编个人角度&#xff0c;简单地介绍一下有关js闭包&#xff08;closure&#xff09;的相关知识。目的是帮助一些对js开发经验不是很多的朋友&#xff0c;使他们可以…...

编程日记 2024/11/19 5:18:24

免费下载现成ppt网站/免费推广引流平台有哪些

官方文档地址&#xff1a;https://docs.python.org/3/library/urllib.html 什么是Urllib Urllib是python内置的HTTP请求库包括以下模块urllib.request 请求模块urllib.error 异常处理模块urllib.parse url解析模块urllib.robotparser robots.txt解析模块 urlopen 关于urllib.re…...

编程日记 2024/11/18 22:11:21

dz论坛做分类网站/杭州小程序建设公司

连试了几次全部失败。 只要用地铁卡了。 手机是&#xff1a;小米note2 支付宝首页》更多》便民生活》城市服务》交通》羊城通乘车码 出现二维码。 接着就是失败&#xff0c;失败&#xff0c;失败……...

编程日记 2024/11/18 21:57:09

新网站建设方案/营销渠道有哪些

Discuz! X3 在继承和完善 Discuz! X2.5 的基础上&#xff0c;针对“系统架构”、“负载性能”、“用户交互体验”等几大方面&#xff0c;进行了全面升级。 为进一步保障正式版的稳定&#xff0c;我们特此发布RC版&#xff0c;希望广大站长协助我们进行测试。 下载地址 简体中…...

编程日记 2024/11/18 21:23:58