CSS中height设置100vh和100%的区别
文章目录
- CSS中height设置100vh和100%的区别
- 一、引言
- 二、高度设置的区别
- 1、100%
- 1.1、父元素高度固定
- 1.2、父元素高度未定义
- 2、100vh
- 2.1、视口高度
- 2.2、不受父元素限制
- 三、总结
CSS中height设置100vh和100%的区别
一、引言
在前端开发中,我们经常需要设置元素的高度。CSS 提供了多种方式来定义元素的高度,其中 height: 100%; 和 height: 100vh; 是两种常见的设置方式。它们之间有着明显的区别,了解这些区别对于创建响应式布局和实现特定的视觉效果至关重要。
二、高度设置的区别
1、100%
height: 100%; 表示元素的高度是其包含块(父元素)的高度的 100%。这里的关键是“包含块”,它可能是父元素,也可能是最近的非静态定位的祖先元素。
1.1、父元素高度固定
当父元素的高度被明确设置时,子元素使用 height: 100%; 将会完全填充父元素的高度。
<div style="height: 300px; background-color: yellow;"><div style="height: 100%; background-color: blue;"></div>
</div>
在这个例子中,内部的 <div> 将会完全填充外部 <div> 的高度。
1.2、父元素高度未定义
如果父元素的高度没有被定义,那么子元素即使设置了 height: 100%; 也不会显示任何高度,因为百分比是基于父元素的高度来计算的。
<div style="background-color: yellow;"><div style="height: 100%; background-color: blue;"></div>
</div>
这种情况下,内部的 <div> 高度将会是 0。
2、100vh
height: 100vh; 表示元素的高度是视口(viewport)高度的 100%。vh 是 viewport height 的缩写,其中 1vh 等于视口高度的 1%。
2.1、视口高度
无论父元素的高度如何,使用 height: 100vh; 的元素都会扩展到与视口相同的高度。
<div style="height: 100vh; background-color: blue;"></div>
这个 <div> 将会覆盖整个视口的高度,无视其父元素的高度。
2.2、不受父元素限制
即使父元素的高度被限制,使用 height: 100vh; 的子元素也会扩展到视口的高度。
<div style="height: 200px; background-color: yellow;"><div style="height: 100vh; background-color: blue;"></div>
</div>
在这个例子中,内部的 <div> 高度将会与视口一致,不受外部 <div> 的限制。
三、总结
height: 100%; 和 height: 100vh; 在 CSS 中提供了不同的高度设置方式。100% 依赖于父元素的高度,而 100vh 则与视口的高度相关。在设计响应式布局时,合理使用这两种单位可以提高页面的灵活性和用户体验。
版权声明:本博客内容为原创,转载请保留原文链接及作者信息。
参考文章:
- CSS中height:100vh和height:100%的区别_CSDN博客
- 前端设置宽高时height: 100% 和 100vh 的区别 - 艺术诗人
相关文章:
CSS中height设置100vh和100%的区别
文章目录 CSS中height设置100vh和100%的区别一、引言二、高度设置的区别1、100%1.1、父元素高度固定1.2、父元素高度未定义 2、100vh2.1、视口高度2.2、不受父元素限制 三、总结 CSS中height设置100vh和100%的区别 一、引言 在前端开发中,我们经常需要设置元素的高…...
红米k60至尊版工程固件 MTK芯片 资源预览 刷写说明 与nv损坏修复去除电阻图示
红米k60至尊版机型代码为:corot。 搭载了联发科天玑9200+处理器。此固件mtk引导为MT6985。博文将简单说明此固件的一些特点与刷写注意事项。对于NV损坏的机型。展示修改校验电阻的图示。方便改写参数等 通过博文了解 1💝💝💝-----此机型工程固件的资源刷写注意事项 2…...
QEMU使用Qemu-Guest-Agent传输文件、执行指令等
简介 之前介绍过qemu传输文件,使用的挂载 / samba方式 :Qemu和宿主机不使用外网进行文件传输。 这是一种方式,这里还有另一种方式:使用Qemu-Guest-Agent,后面简称qga。 官网介绍:https://www.qemu.org/d…...
【漏洞复现】金和OA C6 GeneralXmlhttpPage.aspx Sql注入漏洞
免责声明: 本文旨在提供有关特定漏洞的信息,以帮助用户了解潜在风险。发布此信息旨在促进网络安全意识和技术进步,并非出于恶意。读者应理解,利用本文提到的漏洞或进行相关测试可能违反法律或服务协议。未经授权访问系统、网络或应用程序可能导致法律责任或严重后果…...
复数表示的电场
Exm加是复振幅,这是用复数表示电场,并提取只与空间有关的项复振幅就是复数表示电场,且把与空间xyz有关的量提取出来 经过验证实数E0cos(wtδx)对t求导,等于E0e^j(wtδx)对t求导再取实部 实数表示电磁波cos…...
常用快捷键整理
用加粗标注的是我个人使用时常用的,其实这个全凭个人喜好,大家可以熟悉一下自己喜欢的,都多试试,把觉得有用的记一下,多使用,后续写代码效率就会提高一些) 常用 VS 运行调试程序快捷键 编译 . 编译程序&a…...
【Transformer】长距离依赖
在自然语言处理(NLP)中,长距离依赖(Long-Range Dependencies)指的是在文本中相隔较远的两个或多个元素之间的依赖关系。这些依赖关系可以是语法上的,也可以是语义上的。例如,在句子中࿰…...
Git傻傻分不清楚(下)
进入Idea编译器 File -> New -> Project from Version Control -> URL (这个路径是要拉取项目的Github路径哦~) 设置成maven项目...
golang学习笔记27-反射【重要】
本节也是GO核心部分,很重要。包括基本类型的反射,结构体类型的反射,类别方法Kind(),修改变量的值。 目录 一、概念,基本类型的反射二、结构体类型的反射三、类别方法Kind()四、修改变量的值 一、概念,基本…...
利用Puppeteer-Har记录与分析网页抓取中的性能数据
引言 在现代网页抓取中,性能数据的记录与分析是优化抓取效率和质量的重要环节。本文将介绍如何利用Puppeteer-Har工具记录与分析网页抓取中的性能数据,并通过实例展示如何实现这一过程。 Puppeteer-Har简介 Puppeteer是一个Node.js库,提供…...
YOLOv5改进系列(1)——添加CBAM注意力机制
一、如何理解注意力机制 假设你正在阅读一本书,同时有人在你旁边说话。当你听到某些关键字时,比如“你的名字”或者“你感兴趣的话题”,你会自动把注意力从书上转移到他们的谈话上,尽管你并没有完全忽略书本的内容。这就是注意力机…...
无头单向非循环java版的模拟实现
【本节目标】 1.ArrayList的缺陷 2.链表 1. ArrayList的缺陷 上节课已经熟悉了 ArrayList 的使用,并且进行了简单模拟实现。通过源码知道, ArrayList 底层使用数组来存储元素: public class ArrayList<E> extends AbstractList<…...
Bert Score-文本相似性评估
Bert Score Bert Score 是基于BERT模型的一种方法。它通过计算两个句子在BERT模型中的嵌入编码之间的余弦相似度来评估它们的相似度。BERTScore考虑了上下文信息和语义信息,因此能够更准确地衡量句子之间的相似度。 安装 pip install bert-score 使用例子 一个…...
Pyenv管理Python版本,conda之外的另一套python版本管理解决方案
简介 Pyenv 是一个 python 解释器管理工具,可以对计算机中的多个 python 版本进行管理和切换。为什么要用 pyenv 管理python呢,用过的 python 人都知道,python 虽然是易用而强大的编程语言,但是 python 解释器却有多个版本&#…...
快速实现AI搜索!Fivetran 支持 Milvus 作为数据迁移目标
Fivetran 现已支持 Milvus 向量数据库作为数据迁移的目标,能够有效简化 RAG 应用和 AI 搜索中数据源接入的流程。 数据是 AI 应用的支柱,无缝连接数据是充分释放数据潜力的关键。非结构化数据对于企业搜索和检索增强生成(RAG)聊天…...
css的页面布局属性
CSS Flexbox(Flexible Box Layout)是一种用于页面布局的CSS3规范,它提供了一种更加高效的方式来布置、对齐和分配容器内元素的空间,即使它们的大小是未知或者动态变化的。Flexbox很容易处理一维布局,即在一个方向上&am…...
RTE 大会报名丨AI 时代新基建:云边端架构和 AI Infra ,RTE2024 技术专场第二弹!
所有 AI Infra 都在探寻规格和性能的最佳平衡,如何构建高可用的云边端协同架构? 语音 AI 实现 human-like 的最后一步是什么? AI 视频的爆炸增长,给新一代编解码技术提出了什么新挑战? 当大模型进化到实时多模态&am…...
【React】入门Day01 —— 从基础概念到实战应用
目录 一、React 概述 二、开发环境创建 三、JSX 基础 四、React 的事件绑定 五、React 组件基础使用 六、组件状态管理 - useState 七、组件的基础样式处理 快速入门 – React 中文文档 一、React 概述 React 是什么 由 Meta 公司开发,是用于构建 Web 和原生…...
<<机器学习实战>>10-11节笔记:生成器与线性回归手动实现
10生成器与python实现 如果是曲线规律的数据集,则需要把模型变复杂。如果是噪音较大,则需要做特征工程。 随机种子的知识点补充: 根据不同库中的随机过程,需要用对应的随机种子: 比如 llist(range(5)) random.shuf…...
链表OJ经典题目及思路总结(一)
目录 前言1.移除元素1.1 链表1.2 数组 2.双指针2.1 找链表的中间结点2.2 找倒数第k个结点 总结 前言 解代码题 先整体:首先数据结构链表的题一定要多画图,捋清问题的解决思路; 后局部:接着考虑每一步具体如何实现,框架…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
