Viewport units 和 calc(梁王的理论自习室)(待补充移动前端开发部分)

前言

这两个属性我之前也见到过，但我今天是第一次在实践中第一次使用这些东西，顺便总结一下

Viewport units: vw, vh, vmin, vmax

viewport中文翻译过来是视区的意思，是用户网页的可视区域（区别于百分比）。
vh是相对于视区的高度。视区高度被均分为100单位的vh (window.innerHeight可以获取显示区高度)
vw是相对于视区的宽度。视区宽度被均分为100单位的vw (window.innerWidth可以获取显示区宽度)

vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
比如，浏览器的宽度设置为1200px，高度设置为800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则为10.8px。

兼容性问题

总的来说在主流浏览器上没有兼容问题，IE老版本就算了

viewport units兼容性

http://caniuse.com/#feat=viewport-units

calc兼容性

http://caniuse.com/#search=vh

实战

我现在要实现一个布局，最上面是导航栏头部，固定不动，最下面是播放器，也是固定不动。然后我需要让中间的内容自适应高度要充满屏幕其他位置，而且如果内容的高度overflow了要显示滚动条
效果图如下：

效果图

分析

一开始我是打算用传统的布局方式的(布局我要后面专门写一个系列)，不过既然我不需要兼容性，还是直接上flex吧。
这种头部和尾部定高，中间自适应的代码用flex非常简单。下面是简化版的代码。

#app {
  display: flex;
  flex-direction: column;
}
.header {
  flex: 0 0 60px;
}
.body {
  flex: 1;
}
.footer {
  flex: 0 0 52px;
}

恩，出来的效果很好，完美符合预期。

然而抱着内容很多溢出的时候会不会出错的想法(很多情况直接照着设计图撸老是会出现溢出问题)，我试了一下
。结果整个#app出现了滚动条，这个时候我的播放器就无法出现在屏幕最下面了，这可怎么办。

是时候请出今天的主角了，我在body上加了一句（注意你可能需要再加一个overflow: auto）

height: calc(100vh - 60px - 52px);

问题瞬间解决