微信小程序高度设置为100%

Posted 2020-12-26 znsongshu

在网页中设置body,html{height:100%};

将body和html设置为100%，这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦。

但是在微信小程序中，是没有dom对象的，但是我们看调试工具可以看到在dom树(我也不知道怎么叫了，就这么叫吧)中，根节点是page，所以我们来试试使用page{height:100%}

 

<view class=‘index-wrapper‘>
  <view class=‘index-userinfo-container‘>
   <!--  <image src=‘{{userInfo.avatar}}‘></image>-->
  </view>
  <view class=‘index-operate-container‘>
   <!-- <image src=‘{{userInfo.avatar}}‘></image> -->
  </view>
</view>

page{
  height: 100%
}
.index-wrapper{
  background: blue;
  height: 100%;
  width: 100%;
  display:flex;
  flex-direction:column;
}
.index-userinfo-container{

  background: black;
  height: 50px;
}
.index-operate-container{

  background: green;
  height: 50px;
}