CSS3新增的视口单位Vh、Vw单位

AI3D_WebEngineer

于 2023-02-27 10:02:27 发布

阅读量996

点赞数

分类专栏： Html/CSS 文章标签： javascript 前端 html5 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_42274805/article/details/129235320

版权

Html/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vw和vh是CSS3中基于浏览器视口的相对长度单位，1vw等于视口宽度的1%，1vh等于视口高度的1%。vmin是vw和vh中较小值的百分比，vmax是两者较大值的百分比。这些单位在响应式设计中用于动态适应窗口尺寸变化，例如，100vh可以设置元素高度等于浏览器的可视区域高度。与百分比单位不同，vh可以直接获取视口高度，即使在未设定body高度的情况下。

摘要由CSDN通过智能技术生成

定义

vw：浏览器可见视口【宽度】的百分比（1vw代表视窗【宽度】的1%）
vh：浏览器可见视口【高度】的百分比（1vw代表视窗【高度】的1%）
vmin：当前 vw 和 vh 较小的一个值。
vmax：当前 vw 和 vh 中较大的一个值。

视窗与可见视口是一个意思。

VH

css3新增的一个相对长度单位。相对于视窗的高度, 视窗被均分为100单位的vh，即1vh永远等于当前视窗高度的百分之一。

视窗所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

因此，100vh就等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。

设置height:100vh，不论元素没有内容，该元素都会被撑开与屏幕高度一致

<body>
    <div style="background-color: red; height: 100vh;"></div>
</body>
<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>

在容器里面，vh照样生效

<body>
    <div style="height:200px;overflow: visible;">
        <div style="background-color: red; height: 100vh;"></div>
    </div>
</body>

在多深的容器层里依然生效

  <body>
    <div style="height: 300px; overflow: visible">
      <div style="height: 200px; overflow: visible">
        <div style="height: 100px; overflow: visible">
          <div style="background-color: red; height: 100vh"></div>
        </div>
      </div>
    </div>
  </body>

应用场景：

<body>
    <header style="height:200px;background-color: green;">头部</header>
    <div style="height:calc(100vh - 200px);background-color: blue;">内容</div>
</body>