html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位...

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就超出了