html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位..._郝景芳的博客-CSDN博客
html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位...
郝景芳
于 2021-06-22 11:54:29 发布
2841
收藏
文章标签：
html vh和百分比
css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位
height:100vh
一些只能vw, vh才能完成的应用场景：
1. 场景之：元素的尺寸限制
vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图
原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。
这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，算是比较折腾的。
但是，vw, vh等单位本身就是浏览器视区大小相关单位，直接使用其做限制，岂不省了N多JS代码？
CSS代码：
.vw_vh_img {
max-width: 90vw;
max-height: 90%;
max-height: 90vh;
HTML代码：
2. CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面
3. 视区覆盖以及边界定位
vh确实是相对于屏幕的，但默认body有一个margin，100%加上这个margin就超出了就会出现滚动条。清除body的margin即可。
body{margin:0;}
=====================
在做手机端的时候经常会用到的做字体的尺寸单位
说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。
2.rem
这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。
参照后面给的demo
3.vh
vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
4.vw
vw就是当前屏幕宽度的1%
补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，
但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况恭贺新春
html{
font-size: 14px;
.em,
.em > .em-son,
.em > .em-son > .em-grandson {
font-size: 1.2em;
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {
font-size: 1.2rem;
.rem-box {
background: #d60b3b;
width:10rem;
height: 10rem;
color: #fff;
text-align: center;
line-height:5rem;
.vhvw-box {
background: #d60b3b;
width:50vw;
height: 50vh;
color: #fff;
text-align: center;
line-height:25vh;
em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化
字体大小 1.2 * 14(父元素body) = 16px
字体大小 1.2 * 16(父元素em) = 20px
字体大小 1.2 * 20(父元素em-son) = 24px
rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化
字体大小 1.2 * 14(根节点html) = 16px
字体大小 1.2 * 14(根节点html) = 16px
字体大小 1.2 * 14(根节点html) = 16px
rem 也可作为固定长度单位设置宽高等
宽：14 * 10 = 140px
高：14 * 10 = 140px
vh,vw 屏幕可见区域的高度，宽度的1%
宽：屏幕宽度的50%
高：屏幕高度的50%
恭贺新春
html{
font-size: 14px;
.em,
.em > .em-son,
.em > .em-son > .em-grandson {
font-size: 1.2em;
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {
font-size: 1.2rem;
.rem-box {
background: #d60b3b;
width:10rem;
height: 10rem;
color: #fff;
text-align: center;
line-height:5rem;
.vhvw-box {
background: #d60b3b;
width:50vw;
height: 50vh;
color: #fff;
text-align: center;
line-height:25vh;
em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化
字体大小 1.2 * 14(父元素body) = 16px
字体大小 1.2 * 16(父元素em) = 20px
字体大小 1.2 * 20(父元素em-son) = 24px
rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化
字体大小 1.2 * 14(根节点html) = 16px
字体大小 1.2 * 14(根节点html) = 16px
字体大小 1.2 * 14(根节点html) = 16px
rem 也可作为固定长度单位设置宽高等
宽：14 * 10 = 140px
高：14 * 10 = 140px
vh,vw 屏幕可见区域的高度，宽度的1%
宽：屏幕宽度的50%
高：屏幕高度的50%
郝景芳
关注
关注
点赞
收藏
知道了
评论
html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位...
css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位height:100vh一些只能vw, vh才能完成的应用场景：1. 场景之：元素的尺寸限制vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。这类限制的实现，在当下，需...
复制链接
扫一扫
vhll-js:虚拟HyperLogLog是高度紧凑的虚拟最大似然草图，用于为Node.js计算大型网络数据
05-13
虚拟HyperLogLog
虚拟HyperLogLog是用于计算大型网络数据的高度紧凑的虚拟最大似然草图。
这是有史以来用JavaScript创建的第一个实现。
TL; DR：一个HyperLogLog中的多个HyperLogLog，彼此之间共享位（理论上每个寄存器低至0.1位）
加长版：数据结构取自于论文（参见下文），该论文提出了一种称为虚拟最大似然草图的新方法，以通过对大量流进行基数估计来减少内存消耗。 它体现了两个想法。 第一个想法称为虚拟草图，它在每个草图上平均使用不超过两位，同时保留了与FM草图等效的功能。 第二个想法称为虚拟草图矢量，它将所有流的草图合并到一个混合的公共池中。 这两个想法在一起可以大大减少总体内存开销。 基于虚拟草图和虚拟矢量，我们设计了具有在线运算模块和离线估计模块的基数估计解决方案。
有关算法和引用的详细信息，请暂时使用本文
##注意此实现使用1
css 100vw、100vh出现滚动条怎么解决
m0_52726759的博客
02-13
2642
css，100vw、100vh滚动条问题
参与评论
您还未登录，请先
登录
后发表或查看评论
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
weixin_30335353的博客
04-24
151
px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
(另外需注意chrome强制最小字体为12...
CSS中height:100vh和height:100%的区别是什么？
lalala_dxf的博客
02-03
3509
子元素会自动填充父元素，也就是此时子元素的高度等于父元素的高度，同时我们可以知道，当父元素的宽高为0时，子元素的高度也为0，那么整个图形也就变成下面这个样了。首先，我们得知道1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%（可以这么理解？可以看到，父元素是被子元素撑开了，此时父元素的高度就等于子元素的高度。（3）当一个元素内部有固定高度子元素的时候，给这个元素设置。（2）当一个元素内部没有子元素的时候，设置。（1）当父元素固定高度，子元素设置。可以看到，子元素设置。
vh 存在问题？试试动态视口单位之 dvh、svh、lvh
油墨香^-^的博客
02-13
109
简单再总结一下，本文通过 vh 在移动存在的问题入手，引出了规范新增的三大类新的和视口相关的单位。分别是：大视口（Large Viewport）小视口（Small Viewport）动态视口（dynamic viewport）它们的出现，极大的弥补了之前 vh/vw 等视口单位存在的问题。CSS 的更新迭代一直在快速持续，很多内容还是有必要不断了解学习，在不久的将来就能很快应用在业务中。此外，除了动态视口外，其实 CSS 还更新了与容器大小相关的相对单位 -- 譬如cqw和cqh。cqw。
html文件怎么生产vm页面,认识视口单位vm、vh在网页中的排版应用
weixin_42513512的博客
06-03
403
在之前的两篇关于构建模块化的文章中，谈到了 rem & em 和 响应式排版，而在文章的评论中，对基于视口单位的网页排版抱有很大的想象空间。由于视口单位涉及到计算，有一段时间我是抵制在工作使用视口单位。但就在上周，我克服了心中的抵制情绪，开始去了解视口单位在网页排版中的使用。在深入介绍视口单位以及其在网页排版中的工作原理时，先了解下有哪些常见的视口单位。视口单位是什么？在 CSS 规范中，...
html vh和百分比,css 100vh等于多少？
weixin_39924779的博客
06-22
2506
css 100vh等于多少？vh是css中的一个相对长度单位，相对于视窗的高度, 视窗被均分为100单位的vh，即1vh永远等于当前视窗高度的百分之一。视区所指为浏览器内部的可视区域大小， 即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。因此，100vh就等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。拓...
html视口单位：vw,vh,rem
蹦极的考拉
08-14
513
前言
不像响应式布局，通过media query，设置几个变化点来适配，流体排版通过调整大小，适配所有设备宽度。这个方法可以使我们开发的网页，在几乎所有屏幕尺寸上都可以使用。但出于一些原因，它的使用率还远远没有响应式技术高。
在印刷的历史上，排版是根深蒂固的。关于“流体”的概念，在传统思想里并不存在。这是因为，在印刷上，尺寸大小都是有固定的，不用考虑在页面上使用。我认为流体排版技术可以和网页很好...
height:100vh
热门推荐
qq_40001322的博客
06-30
3万+
1.em在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。2.rem这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点...
html pc vw过大,细说em/rem/vh/vw与响应式布局
weixin_32790659的博客
06-19
579
细说em/rem/vh/vw与响应式布局一、em,rem的原理与应用场景CSS单位中的长度单位分为：相对长度、绝对长度，如下表：引用MDN上的两句话：em：在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小；rem：根元素的字体大小出处链接：MDN1.em是相对长度单位，通常浏览器的默认字体都是16px，那么1em = 16px，以此类推可知：0.75e...
react-viewport-height:用于将React设置为等于实际浏览器内部窗口高度的100vh的实用程序
04-12
react-viewport-height React的实用程序，可将100vh设置为等于实际浏览器内部窗口的高度。 由于vh在移动浏览器上有麻烦（主要是由于地址栏），因此有一些技巧可以解决它。 该软件包实现了的一个。用法npm install ...
VH3.96.PcbLib
03-14
VH3.96.PcbLib
spi.rar_SPI VHDL_SPI.v_c程序_spi project_spi vh
09-21
此程序是一个完整的项目工程，包括c-c++程序和VHDL程序
sha-1.rar_SHA_SHA-1 VHDL_sha vh_sha-1.v_verilog sha
09-21
本算法基于leon2协处理器接口标准，内含testbench，在modelsim中仿真通过，在ise9.2中综合及后仿真通过。
calc()方法
dingsongtuo4851的博客
10-31
347
calc()= calc(四则运算)
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
转载于:https://www.cn...
CSS 动态计算长度值
qq_37562908的博客
09-27
1399
CSS calc() 函数
之前就一直记得一个函数可以动态计算长度值，可是想用的时候老是想不起来，今天无意翻到做下记录。
需求：有的时候给的宽度是100% 或者 100vh，因为某种原因需要减去固定长100px。
方案：使用css3 新增内容——calc()函数。calculate的缩写
实例：
#div1 {
position: absolute;
left: ...
基于vue解决 100vw 和 100vh出现滚动条的问题
zjslan_js的博客
07-15
3499
基于vue解决 100vw 和 100vh出现滚动条的问题
html 上左中右下布局
最新发布
02-17
HTML 上左中右下布局可以通过 CSS 样式实现。下面是一种简单的实现方法：
HTML 代码：
```
<div class="container">
<div class="header">头部内容</div>
<div class="left">左侧内容</div>
<div class="center">中间内容</div>
<div class="right">右侧内容</div>
<div class="footer">底部内容</div>
</div>
```
CSS 代码：
```
.container {
display: flex;
flex-direction: column;
height: 100vh;
.header {
height: 50px;
background-color: gray;
.left {
flex: 1;
background-color: blue;
.center {
flex: 2;
background-color: green;
.right {
flex: 1;
background-color: yellow;
.footer {
height: 50px;
background-color: orange;
```
这个布局使用了 Flexbox，将容器设置为列布局，然后设置各个子元素的高度和 flex 属性，实现了左中右三列自适应宽度，头部和底部固定高度的效果。您可以根据实际需要调整容器高度、子元素宽度和高度，以及样式的颜色和字体等属性。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
郝景芳
CSDN认证博客专家
CSDN认证企业博客
码龄5年
暂无认证
74
原创
周排名
187万+
总排名
12万+
访问
等级
46
积分
粉丝
15
获赞
评论
81
收藏
私信
关注
热门文章
u盘插电脑计算机卡了,电脑插入U盘就卡顿？3个原因你需要了解一下
15775
为什么从此电脑访问不了ftp_ftp无法访问此文件夹怎么解决_ftp文件夹错误无法访问此文件夹如何处理-win7之家...
8518
wps怎么全选所有页_wps word中怎么全选一页
5845
java 将map赋值给另一个map_消灭 Java 代码的“坏味道”
5797
android10版本升级包下载,一加7 Pro安卓10稳定版系统刷机包下载：第2版
5018
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
dhcp服务器里的dns怎么修改,dhcp服务器的dns设置方法
我的服务器新手箱子无限,家庭影音之路 篇一：#原创新人#服务器安装Rutorrent（PT盒子）Seedbox教程...
手机wps系统打印服务器,MK-WPS101w单USB无线打印服务器网页版教程
2021年151篇
2020年9篇
目录
目录
最新文章
dhcp服务器里的dns怎么修改,dhcp服务器的dns设置方法
我的服务器新手箱子无限,家庭影音之路 篇一：#原创新人#服务器安装Rutorrent（PT盒子）Seedbox教程...
手机wps系统打印服务器,MK-WPS101w单USB无线打印服务器网页版教程
2021年151篇
2020年9篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值