欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于height:100%和height:100vh的区别了解吗,进来看看

程序员文章站 2022-07-13 21:56:38
...

关于height:100%和height:100vh的区别


vh:相对于视口的高度。视口被均分为100单位的vh
1vh==1%的高度 屏幕1%的高度
height:100% 若div中没有东西的话 不会显示
height:100vh 不管有没有东西 都会撑到屏幕大小

关于height:100%和height:100vh的区别了解吗,进来看看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 50%;border: aqua solid 1px">

</div>
<div>上面是height:50%</div>
<div style="height:30vh;border: aqua solid 1px"></div>
<div>上面是height:30vh</div>
</body>
</html>

相关标签: 前端 css html