在做嵌入到 app 中的页面时，页面宽度的自适应我感觉比较简单，大多数时候 CSS 中的 width 设置为 100% 就能满足要求；但是高度自适应就没这么简单了。

做一个视频播放页面，大致是这样一个结构：

如图所示，主要需要自适应的是内容区域的高度。

内容区域有背景色，所以在没有内容撑开的时候，也需要有高度；而里面的内容超出范围后，只能在内部滚动，不能影响上面的播放区域，也就是说，整个页面是不可以滚动的。

第一个想法是：

页面的长度单位是 rem，按照设计图量好高度，然后再换算为 rem 值后，直接设置给各区域的 height 属性。

这种方法在与设计图的宽高比相同的手机屏幕上奏效了，但是在其他手机上，内容区域和底部菜单之间断开了，扑街……

第二个想法是：

首先设置 body 的定位属性为绝对定位，上右下左的距离都设置为 0，这样 body 由于没有设置宽高，会自动撑开以满足定位的距离；

然后在 JS 中通过 offsetHeight 获取 body 高度后，再减去播放区域和选项卡标签的高度，剩余的高度值通过 style 属性设置给内容区域。

这种方法奏效了，但是会有一些毛病，比如整个页面偶尔会出现滚动条，虽然可以用 overflow 属性来控制，但是比较麻烦；另外就是代码比较多，CSS 设置完了又要动 JS 那边。

所以有了第三个想法：

既然要用 JS 来控制高度，那就不用 CSS，完全使用 JS 吧。获取 body 的高全是基于 Document 对象的，于是试了 window 对象的 screen 属性的高来代替 body 高度，结果是扑街……

原因是这个属性获取的是整个屏幕的高，也就包含了 App 中的顶部、底部菜单的高度，我再减这两个高度，会更加的麻烦。

然后搜搜搜找到了一个 window 对象的属性，innerHeight，定义是：只读属性，声明了窗口的文档显示区的高度和宽度，以像素计；这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

欧耶！正是需要的！虽然不能被 IE 兼容，但是手机上有 IE 什么事儿啊！

最后，通过获取 window 对象的 innerHeight 再减去几个固定的盒子高度，剩下的高度设置给内容区域，搞定，坑填上了……