微信小程序中使view占满整个屏幕高度的实现方法

前言：

今天做小程序的时候，在项目中要用到一个view占满屏幕高度和宽度，然后再在这个view里放置其他元素的情况。

宽度很简单，直接设置width: 750rpx;或者width: 100%;就行。但是高度呢，高度height:100%;是没有效果的，因为必须在父元素高度给定的情况下，height:100%;才有效果。

很多人的解决办法是，在js里获取屏幕高度，然后赋给view，那有没有办法直接在css里完成这个操作呢？

解决方案：

我们都知道在网页中设置body,html{height:100%};将body和html设置为100%，这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦。但是小程序没有dom对象怎么办？

我们可以打开小程序的调试器看到，小程序的根节点是page，那么解决方法就很简单了，我们可以将page的高度设置为height:100%;这样问题就解决了，代码如下：

 

wxml：

<view class="background-view">
    <!-- 需要使用 button 来授权登录 -->
    <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
</view>

wxss：

page{
  height:100%
}

.background-view{
  position: relative;
  background-color: tomato;
  height: 100%;
  
}

结果：

最后谢谢大家的阅读，希望我的文章能够帮助到大家。