uniapp页面高度设置（铺满可视区域、顶部状态栏高度、底部导航栏高度）

这里说几种在uniapp开发中，关于页面设置高度的几种情况。宽度就不说了哈，宽度设置百分比都会生效。

首先我们要知道平时开发中，如果说没在uniapp做特殊处理，即正常情况下，所有的页面（.vue文件）中都是没有高度的（和vue一样），也就是说给最外层的的view标签设置高度为100%是没啥作用的，只要没内容高度依然是0

1. 对高度没要求

对高度没有要求的意思就是，我们不需要关心页面的高度，直接编写内容即可，这样页面高度会根据内容自动扩大，当超出可视区域后，会自动产生滚动条，这种没啥说的，正常开发即可。

2. 希望项目中所有的页面的可视区域都100%填满

意思就是说，希望在平时的开发中，任何一个页面，只要给最外层的view标签设置了100%高度，那么当前的页面直接填满。要实现这一点其实很方便，我们只需要在App.vue中的style标签中添加如下代码即可：

App.vue 的 <style lang="scss"></style>中 

uni-page-body,html,body{height: 100%;  
}

设置完以后，我们在开发的页面直接这样编写即可填满：