首页 > 微信 > 详细

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

时间:2018-07-31 10:22:01      阅读:220      评论:0      收藏:0      [点我收藏+]

在网页中设置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;
}

 

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

原文:https://www.cnblogs.com/znsongshu/p/9394000.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!