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

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

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

时间: 2024-10-10 13:19:41

微信小程序高度设置为100%的相关文章

微信小程序如何设置开发者和体验者

微信小程序需要在后台添加开发者和体验者 开发者:增加开发人员的,开发人员添加后,可上传代码,最多10个人,可以删除 体验者:添加为体验者,管理员发布体验版本后,通过扫码二维码可以下载体验版小程序,最多20个人,添加人后是可以删除的 ---------------------------- 原文地址http://www.cnblogs.com/likwo/p/6057151.html 好推微信小程序统计:https://weixin.hotapp.cn 最专业的第三方微信小程序统计工具,一行代码接

微信小程序开发 -- 设置屏幕亮度

wx.setScreenBrightness(OBJECT) 设置屏幕亮度. OBJECT参数说明: 参数 类型 必填 说明 value Number 是 屏幕亮度值,范围 0~1,0 最暗,1 最亮 success Function 否 接口调用成功 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数(调用成功.失败都会执行) // 保持屏幕常亮 wx.setKeepScreenOn({ keepScreenOn: true

微信小程序~自定义属性设置和获取(data-)

自定义属性语法以data-开头: <button data-info="自定义数据" bindtap="testClick">自定义属性测试</button> 无论你这样写data-info="..."还是这样写data-INFO="...",获取值的时候都是这样: 获取: testClick(event){ const dataInfo = event.currentTarget.dataset.in

微信小程序 自定义标题栏

微信小程序可以设置自定义标题栏,可以针对不同页面单独设置1. 在页面文件 .json 文件中,设置如下属性,自定义导航栏 和 导航栏样式"navigationStyle": "custom","navigationBarTextStyle": "white", 特别是第二个 navigationBarTextStyle 属性 可以将胶囊样式调整为透明效果 2. 设置自定义导航栏布局 样式 动效逻辑等 3. 划重点!!!导航栏中

微信小程序案例之天气预报

 前言 这俩年微信小程序特别火,就抽空在网上找了个天气案例自己学习了下,这个案例稍微做了些调整,所以就和大家一起分享下吧~~~~~. 小程序案列本人参考网址:https://www.cnblogs.com/demodashi/p/8481610.html 步骤 1.注册微信小程序. 2.注册和风天气账号. 3.注册百度地图开发平台应用. 4.微信小程序平台设置合法request域. 5.微信工具开发编码实现. 6.微信小程序平台提交审核发布. 一.准备工作 1.注册微信小程序 注册微信小程序账号

微信小程序开发:http请求

在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主 设置域名 要微信小程序进行网络通信,必须先设置域名,不然会出现错误: URL 域名不合法,请在 mp 后台配置后重试

小程序开发运营必看:微信小程序平台运营规范

一.原则及相关说明 ? 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ? 微信团队一直致力于将微信打造成一个强大的.全方位的服务工具.在此基础上,我们推出了微信小程序这个产品,提供给微信小程序的开发者在微信内搭建和实现特定服务.功能的平台.通过全面开放的能力,我们将更多连接的可能给予企业和服务提供者,并为微信小程序提供基础的接入能力.运营环境和规则体系,进而帮助更多的企业和服务提供

微信小程序入门教程

需要注册微信公众号小程序:https://mp.weixin.qq.com/wxopen/waregister?action=step1 下载微信小程序开发IDE : https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 在微信小程序中设置项获取APPID,如图: 在IDE 中新建一个微信小程序: 微信小程序目录结构: js ---------- JavaScrip文件 json -------- 项目配置

微信小程序如何像vue一样在动态绑定类名

微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44 这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别,需要的朋友可以参考下 小程序 开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化 我们可以将一些公共