其他分享
首页 > 其他分享> > 查漏补缺——说说calc(100vh - 80px)

查漏补缺——说说calc(100vh - 80px)

作者:互联网

问题

如题所示

答案

css3 vh单位使用

CSS3新vw, vh单位

css3新单位vw、vh、vmin、vmax的使用详解

vh,指的是Viewport height,也就是视窗的高度。而什么是视窗呢?

视窗单位-vw/vh/vmin/vmax

如下图所示,浏览器显示内容的部分,其中也包括滚动条,不包括地址栏、搜索栏、标签栏等:

image

相关源码:

 #hzh-layout-body {
    min-height: -moz-calc(100vh - 80px);
    min-height: -webkit-calc(100vh - 80px);
    min-height: calc(100vh - 80px);
 }

那么这里的100vh代表的就是100%的视窗大小,减掉的80px就是header的大小。

min-height: calc(100vh - 80px);这个表示的是会动态计算视窗高度减去header的高度(80px)。

标签:查漏,视窗,vh,height,80px,100vh,calc
来源: https://www.cnblogs.com/Huang-zihan/p/16413075.html