关于小程序设置高度height为100%不起作用的问题

关于在小程序中设置元素CSS的height高度为100%，有些情况管用，而有些情况下不管用，会有留白。主要原因还是跟父元素的height高度设置有关，作如下讨论(本节讨论指正常流下高度设置，其他非正常流如浮动等不适应此讨论)：

一、三个高度单位(即视窗单位与坐标单位)的区别

坐标单位：是指绝对单位，一般与手机分辨率有关。对于网页，以px为单位，对于小程序以rpx为单位。

视窗单位：是指能能看到的手机界面窗口大小，它是一个比例单位，综合手机分辨率和大小，将整个界面高度和宽度分为100份，高度上是1vh=1%界面高度，宽度上是1vw=1%界面宽度。

相对百分比单位：如100%、50%，是指相对其父元素高度或宽度的百分比。这里有个易产生误区，以100%就是视窗100%，要分清楚。

二、当前父元素高度设置为0时

不管当前元素怎么设置，它和它的子元素都会显示不出来。

三、当前父元素高度设置为大于0的固定值时

当父元素没有设置为一个大于0的固定值时，当前元素及其兄弟单位之和不能超显示出父元素范围，当超出时只能隐藏或滚动下显示。

四、当前父元素高度没有设置时

当前父元素高度没有设置时，系统默认为0，但不是指没有显示的那种，是有弹性的0。也就是说，只要父元素有子元素高度，就可以将父元素撑开。所以，针对本文开章提问，有时100%不能显示出满屏高度就是指这种情况。有如下两个解决办法：

解决办法一：

这时，若要想父元素的子元素100%达到满屏高度，就需要设置父元素设为100%。如果父元素不是page页，就要依次往上找更上一层父元素设CSS的height为100%，至到page的height也设为100%。

解决办法二：

在当前元素CSS中用视窗单位来表示，直接写成height:100vh;就行，尤其是当追寻其上层父、祖、曾祖元素复杂较多时，直接用视窗单位，就免去了很多麻烦。