在web页面中，如果想设置一个div元素的高度与高度等于浏览器可视窗口的宽度与高度的话一般都是要借助js脚本来进行设置，除了js脚本外css样式代码中也提供了一个好的方法。
在桌面端(这里不涉及移动端)，浏览器的可视区域也被称为“视口“，而它的宽度与高度也有相应的单位来表示，分别为"vw"与"vh"。
vw：表示视口的宽度，1vw表示视口宽度的 1%;
vh：表示视口的高度，1vh表示视口高度的 1%;
示例1：
定义一个元素，其宽度与高度和浏览器可视区域相同！
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
}
div{
width:50vw;
height: 50vh;
background-color: antiquewhite;
text-align: center;
}
</style>
</head>
<body>
<div>
我的宽度与高度与浏览器可视窗口的宽度与高度一致！
<p>尘心网！</p>
</div>
</body>
</html>示例2：
定义一个元素，其宽度与高度为浏览器可视区域宽与高的50%！
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
}
div{
width:50vw;
height: 50vh;
background-color: antiquewhite;
text-align: center;
}
</style>
</head>
<body>
<div>
我的宽度与高度是浏览器可视窗口宽度与高度的50%！
<p>尘心网！</p>
</div>
</body>
</html>PS：补充内容
1、除了"vw"与"vh"以外，视口单位还包括"vmin"与"vmax".
2、vmin：选取vw和vh中最小的那个
3、vmax：选取vw和vh中最大的那个
THE END
喜欢就支持一下吧
