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

问题

如题所示

答案

css3 vh单位使用

CSS3新vw, vh单位

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

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

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

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

相关源码：

 #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）。