【微信小程序】使页面使内容充满整个屏幕、height 100%不起作用的解决方案

这两天做小程序启动页的时候发现在view标签上设置 height：100%；是没有作用的，其实这个问题也是经常遇到一直没太注意，这次研究了一下写几个解决方案。如下：
一、在css里面用page控制

page{
    height:100%;//这样你在页面中的view设置height:100%就起作用了
}

二、height的单位用vh

view{
	 height:100vh;//相对于视口的高度。视口被均分为100单位的vh，100vh就是充满整个屏幕了
}

这两种确实是可以让你设置的height有效，但是设置的高度是包括你的顶部导航以及底部导航的，所以会超出屏幕有滚动条。想要设置那种一张图占一个屏幕的、没有滚动条啥的看下面一条
三、
1、
css

.mask-layer{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5;
}

wxml

	<view class="shade">
		<view style="width:600rpx;height:300rpx;">
			//这里面写你想展示的东西
		</view>
	</view>

效果图如下

这个适合一些弹窗操作啥的

2、
css

.auto{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

wxml

<view class="auto">
    <image style="width:100%;height:100%;" mode='aspectFill' src=""></image>
</view>

效果图

这个是图片完全充满屏幕 适合启动页、当页面的后台数据没返回的时候展示的一些占位图片啥的