CSS3新增的视口单位Vh、Vw单位
定义
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:浏览器可见视口【宽度】的百分比(1vw代表视窗【宽度】的1%)vh:浏览器可见视口【高度】的百分比(1vw代表视窗【高度】的1%)vmin:当前 vw 和 vh 较小的一个值。vmax:当前 vw 和…...
【Linux】yum安装docker指定版本
🍁博主简介 🏅云计算领域优质创作者 🏅华为云开发者社区专家博主 🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 文章目录卸载已有的docker部署指定版本docker安…...
SpringBoot相关操作
01-今日内容 Spring概述、快速入门SpringBoot配置SpringBoot整合 02-SpringBoot概述 SpringBoot提供了一种快速使用Spring的方式,基于约定优于配置的思想,可以让开发人员不必在配置与逻辑业务之间进行思维的切换,全身心的投入到逻辑业务的…...
Python super()函数:调用父类的构造方法
Python 中子类会继承父类所有的类属性和类方法。严格来说,类的构造方法其实就是实例方法,因此毫无疑问,父类的构造方法,子类同样会继承。 但我们知道,Python 是一门支持多继承的面向对象编程语言,如果子类…...
@ConfigurationProperties在方法上的使用
文章目录1. 前言2. 先说结论3. 代码解释1. Component ConfigurationProperties2. EnableConfigurationProperties ConfigurationProperties3. Bean ConfigurationProperties1. 前言 在学习spring的时候,ConfigurationProperties应该经常被使用到,作用…...
【QT】如何查找和获取界面上的子部件(findChild 和 findChidren)
目录1. findChild()函数2. findChildren()函数3. 示例1. findChild()函数 函数原型: T QObject::findChild(const QString &name QString(), Qt::FindChildOptions options Qt::FindChildrenRecursively) const返回该对象的子对象,该子对象可以转…...
MIT 6.S081学习笔记
计划花25天时间学完6.S081课程,从2月20日-3月20日。课程主页Link xv6 book GDB User Manual Lecture 1: Introduction and Examples课程主题:设计和实现操作系统 OS的三大功能:多路复用、隔离和交互。 Lab: Xv6 and Unix utiliti…...
《网络安全入门到精通》 - 2.1 - Windows基础 - DOS命令Windows防火墙Windows共享文件
「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「订阅专栏」:此文章已录入专栏《网络安全入门到精通》 Windows基础一、DOS命令1、目录文件操作dir 列出目录文件cd 切换目录md 创建目录rd 删除目录move 移动文件或目…...
八、Vben框架动态生成可编辑Table
开发过程中产品经理提出了一些奇怪的需求,让人很摸不着头脑,一问就是客户的需求就是这样,那么我们开发只能想各种办法啦。 最近就提出了两个需求, 第一个是需要在日期选择的时候根据时间选择的不同让底下table中增加两个时间中间的…...
浅谈ERP数据的重要性
影响一个ERP项目的因素有很多,数据无疑是其中很重要的一项,正所谓“正确的诊断源于准确的信息,准确的信息基于可靠的采集”,当我们抓住数据这个根基,大处着眼,小处着手的时候,我们距离ERP成功的日子就不会太…...
【RabbitMQ笔记06】消息队列RabbitMQ七种模式之Topics主题模式
这篇文章,主要介绍消息队列RabbitMQ七种模式之Topics主题模式。 目录 一、消息队列 1.1、主题模式(Topics) 1.2、案例代码 (1)引入依赖 (2)编写生产者 (3)编写消费…...
ChatGPT似乎有的时候并不能搞懂Java的动态分派,你懂了吗?
目录 碎碎念 ChatGPT 中出现的问题 那么正确答案应该是什么呢? 分派的相关知识点总结: 分派是什么? 静态分派与动态分派: Java语言是静态多分派,动态单分派的; 静态分派:静态重载多分派…...
【C++初阶】vector的模拟实现
大家好我是沐曦希💕 文章目录一、前言二、无参构造&析构三、基础接口1.empty和clear2.size和capacity3.[]和iterator四、reserve和resize五、尾插尾删六、其他构造1.迭代器区间构造2.拷贝构造七、memcpy问题八、完整代码一、前言 在模拟实现容器时候࿰…...
微信小程序、小游戏的流量主一般可以赚多少钱?
本篇文章主要科普小程序、小游戏流量主一般赚钱的实际情况,通过在下长期运营的经验汇总而成。 日期:2023年2月26日 作者:任聪聪 小程序、小程序满1000用户后即可开通流量主,但实际上很多人并没有传说中的那种日赚几千的流量收入的…...
jni-Demo-基于linux(c++ java)
跑一个jni 的最简单的Demo需要提前准备 VsCode 编译器、win10下,vscode中集成linux操作系统、c编译器(gcc、g),java编译器(jdk1.8)参考:https://mangocool.com/1653030123842.htmlJniDemo类&…...
指针的进阶——(1)
本次讲解重点: 1、字符指针 2、数组指针 3、指针数组 4、数组传参和指针传参 5、函数指针 关于指针这个知识点的主题,我们在前面已经初级阶段已经对指针有了大致的理解和应用了。我们知道了指针的概念: 1、指针就是地址,但口…...
电商平台的促销活动如何抵御大流量的ddos攻击
每一次活动大促带来的迅猛流量,对技术人而言都是一次严峻考验。如果在活动期间遭受黑产恶意 DDoS 攻击,无疑是雪上加霜。电商的特性是业务常态下通常不会遭受大流量 DDoS 攻击,且对延迟敏感,因此只需要在活动期间按需使用 DDoS 防…...
代码随想录-48-104. 二叉树的最大深度
目录前言题目1.层序迭代思路2. 本题思路分析:3. 算法实现4. pop函数的算法复杂度5. 算法坑点前言 在本科毕设结束后,我开始刷卡哥的“代码随想录”,每天一节。自己的总结笔记均会放在“算法刷题-代码随想录”该专栏下。 代码随想录此题链接 …...
【Vue3源码】第六章 computed的实现
【Vue3源码】第六章 computed的实现 上一章节我们实现了 ref 及其它配套的isRef、unRef 和 proxyRefs API。这一章开始实现computed计算属性。 认识computed 接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。…...
Java基础之注解
3.注解 3.1概述【理解】 概述 对我们的程序进行标注和解释 注解和注释的区别 注释: 给程序员看的注解: 给编译器看的 使用注解进行配置配置的优势 代码更加简洁,方便 3.2自定义注解【理解】 格式 public interface 注解名称 { public 属性类型 属性名() default 默认值…...
Python办公自动化:用PyMuPDF+pdfplumber一键提取PDF文字/图片/表格(附完整代码)
Python办公自动化实战:PyMuPDF与pdfplumber高效提取PDF三要素 每天面对堆积如山的PDF文档,行政和财务人员最头疼的莫过于手动复制粘贴文字、截图保存图片、重新绘制表格。我曾见过一位财务同事为了处理200份供应商报价单,连续加班一周手工录入…...
Unsloth让AI触手可及:免费GPU+开源框架,训练自己的模型
Unsloth让AI触手可及:免费GPU开源框架,训练自己的模型 1. Unsloth简介:高效微调的开源利器 Unsloth是一个专为大型语言模型(LLM)优化的开源微调框架,它的核心使命是让AI训练变得高效且易于获取。通过创新的技术手段,…...
Qwen3.5-4B-Claude-Opus-GGUF效果展示:TCP三次握手状态机推理
Qwen3.5-4B-Claude-Opus-GGUF效果展示:TCP三次握手状态机推理 1. 模型能力概览 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是一个专注于逻辑推理和结构化分析的轻量级AI模型。这个基于Qwen3.5-4B的蒸馏版本特别擅长处理需要分步骤解释的技术问题&#…...
3步实现文件安全验证:HashCheck实战指南
3步实现文件安全验证:HashCheck实战指南 【免费下载链接】HashCheck HashCheck Shell Extension for Windows with added SHA2, SHA3, and multithreading; originally from code.kliu.org 项目地址: https://gitcode.com/gh_mirrors/ha/HashCheck 在数字化办…...
SleeperX:Mac电源管理的智能守护者,让每一次工作都不被打断
SleeperX:Mac电源管理的智能守护者,让每一次工作都不被打断 【免费下载链接】SleeperX MacBook prevent idle/lid sleep! Hackintosh sleep on low battery capacity. 项目地址: https://gitcode.com/gh_mirrors/sl/SleeperX 您是否经历过这样的时…...
自动驾驶避障实战:人工势场法的核心原理与MATLAB仿真
1. 人工势场法基础概念 第一次接触人工势场法是在研究生阶段的机器人学课程上,当时教授用了一个非常形象的比喻:想象你手里拿着一块磁铁,目标点是一块异性磁极的磁铁,障碍物则是同性磁极的磁铁。这个简单的物理现象,就…...
3步解锁音频自由:NCMDump工具全场景解密指南
3步解锁音频自由:NCMDump工具全场景解密指南 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 问题:被加密的音乐困境 音乐收藏者的痛点清单 现代音乐爱好者常面临一个共同难题:从音乐平台下载的N…...
3个实战场景:League-Toolkit如何帮你提升英雄联盟游戏体验
3个实战场景:League-Toolkit如何帮你提升英雄联盟游戏体验 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾在…...
基于深度学习的桥梁健康状态监测与预警系统设计与实现
基于深度学习的桥梁健康状态监测与预警系统设计与实现 1. 系统总体架构 本系统采用 B/S 架构,由数据采集层、数据处理层、深度学习模型层、Web后端层及前端可视化层组成。 后端框架:Django (负责ORM、API、用户认证) 深度学习:TensorFlow 2.x / Keras (构建LSTM-Autoencod…...
# React 发散创新:从状态管理到组件化架构的极致实践在前端开发领域,React
React 发散创新:从状态管理到组件化架构的极致实践 在前端开发领域,React 已经成为构建现代 Web 应用的事实标准。但你是否曾思考过——如何让 React 不只是“写页面”,而是真正成为驱动业务逻辑的核心引擎? 本文将带你突破常规思…...
