查漏补缺——说说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)。