CSS中height:100vh和height:100%的区别

首先，我们得知道1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%（可以这么理解？）

1、对于设置height:100%;有下面几种情况：

（1）当父元素固定高度，子元素设置height:100%;时

<style>#father1 {width: 300px;height: 300px;background-color: yellow;margin: 20px;}#son1{height: 100%;background-color: blue;}
</style><div id="father1"><div id="son1"></div>
</div>

结果如下：

子元素会自动填充父元素，也就是此时子元素的高度等于父元素的高度，同时我们可以知道，当父元素的宽高为0时，子元素的高度也为0，那么整个图形也就变成下面这个样了

（2）当一个元素内部没有子元素的时候，设置height:100%;width:100%;，此时该元素高度为0。

（3）当一个元素内部有固定高度子元素的时候，给这个元素设置height:100%;width:100%;，那么这个元素自动被子元素高度撑开，例如：

<style>#father1 {width: 100%;background-color: yellow;margin: 20px;}#son1{width: 100px;height: 100px;background-color: blue;}
</style><div id="father1"><div id="son1"></div>
</div>

结果如下：

可以看到，父元素是被子元素撑开了，此时父元素的高度就等于子元素的高度。

2、对于设置height:100vh时有如下的情况：

一个元素设置height:100vh，那么该元素会被撑开与屏幕高度一致。

（1）即便父元素限制了宽高，只要子元素设置height:100vh，那么子元素的高度就会和屏幕一样高

<style>#father1 {width: 300px;height: 300px;background-color: yellow;margin: 20px;}#son1 {height: 100vh;background-color: blue;}
</style><div id="father1"><div id="son1"></div>
</div>

结果如下：

可以看到，子元素设置height:100vh时，不会被父元素的高度所限制

height:100vh == height:100%;

（2）父元素设置height:100vh，能够保证元素无论是否有没有内容，高度都等于屏幕高度。

<style>#father1 {width: 300px;height: 100vh;background-color: yellow;margin: 20px;}#son1 {height: 300px;background-color: blue;}
</style><div id="father1"><div id="son1"></div>
</div>

结果如下：

同样的，width:100%和width:100vw的区别差不多，自己探索去吧

再补充下iwidth:100%和width:auto的区别

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.outer {height: 200px;border: 1px solid red;}.center {display: inline-block;height: 100%;width: 100%;border: 1px solid green;}.inner {height: 50px;width: 500px;border: 1px solid blue;}</style></head><body><div class="outer"><div class="center"><div class="inner"></div></div></div><script></script></body>
</html>

如果当前是元素设置了width/height:100%，那么对齐父元素内容区域的宽高；
如果当前元素设置了width/height:auto;那么对齐子元素内部元素的宽高

CSS中height:100vh和height:100%的区别是什么？相关推荐

CSS中绝对定位对子元素height的影响
CSS中height:100%和height:inherit的异同 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhang ...
真正的能理解CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
关于height:100vh和height:100%的区别
1.em 在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于"倍",比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小 ...
在 CSS 中，width 和 height 指的是内容区域的宽度和高度
增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 改变宽度就可以,去掉转载于:https://www.cnblogs.com/fpcbk/p/9582999.html
【CSS中width、height的默认值】
对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...
Css中内边距、边框和外边距的关系
CSS 框模型元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边 ...
html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位...
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
解决css中height:100%失效的问题
解决css中height:100%失效的问题参考文章: (1)解决css中height:100%失效的问题 (2)https://www.cnblogs.com/wangweizhang/p/111 ...

CSS中height:100vh和height:100%的区别是什么？

CSS中height:100vh和height:100%的区别

CSS中height:100vh和height:100%的区别是什么？相关推荐

最新文章

热门文章