微信小程序高度设置为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
微信小程序高度设置为100%相关推荐
- 微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
- 微信小程序:设置字体跟随手机系统
小程序开发:全局设置跟随手机系统默认字体 前言 最近在开发一款微信小程序,发现字体不是跟随手机系统设置的字体,这样对用户很不友好,通过下面这行代码,就可以将页面的字体搞成系统默认字体了. 提示:要设置 ...
- 微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档 动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容 例如普通用户这里不显示赛事t ...
- 微信小程序 border设置单边框失效解决办法
微信小程序 border设置单边框失效解决办法 遇到的问题 解决的方法 总结 遇到的问题 border-right: 1 rpx solid #ccc;border-bottom: 1 rpx sol ...
- 微信小程序--动态设置导航栏颜色
微信小程序--动态设置导航栏颜色 既然要动态设置导航栏颜色,估计 自定义导航栏 也跑不了 关于动态设置导航栏颜色,微信小程序官方文档给出了一个API: wx.setNavigationBarColor ...
- 微信小程序text设置高度_微信小程序字体样式的设置
知识点: 1.常用字体样式属性 2.利用style和class 设置字体样式 3.在app.wxss 和 index.wxss中定义样式 常用字体属性: 举列: 项目目录: 运行结果: 在index. ...
- 微信小程序高度自适应布局
上图是我想要实现的效果,图片和文字描述区域各占屏幕的50%:在微信小程序中的通常做法是内联样式控制. <!--index.wxml--> <view class="&quo ...
- uni-app微信小程序动态样式设置;微信小程序style行内式无效;微信小程序style行内式编译报错;微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
- 微信小程序background-image设置(文末还有wxss的万能模板)
微信小程序通过background-image设置背景:线上图片,base64图片,不支持本地图片: base64图片设置步骤如下:(这种方式如果图片过大,可能超内存) 1.在网站 http://im ...
最新文章
- android sdk安装
- Uber AI实验室总结「神经进化」研究:如何利用遗传算法优化网络?
- 机器学习常见算法及优缺点!
- tungsten开机启动及进程开启停止
- 每一个C#开发者必须知道的13件事情
- 32时间片轮转_系统时间
- java date不要秒_java – 比较日期忽略Joda中DateTime的秒和毫秒时刻
- SAP Spartacus delivery mode页面两个一模一样的cart API请求
- Wpf 数据绑定简介、实例1
- 公司的计算机邮箱找不到了,找不到我现在的邮箱
- SSM框架笔记12:Spring JdbcTemplate
- ArcGIS Pro 简明教程(2)基础操作和简单制图
- 批处理计算n天前\后的日期
- C++ 偏微分数值计算库_「首席架构师推荐」数值分析软件精选
- 华为状态栏图标替换_【新手教程】状态栏图标替换教程
- 芝麻小客服怎么进后台?
- 微信小程序 async await解决异步问题
- 苹果手机怎么在照片上添加文字_给微信拍照的照片添加文字,调整后期效果,手机两步完成...
- 一天一个 Linux 命令(37):killall 命令
- 小白终是踏上了这条不归路----小文的mysql学习笔记目录
热门文章
- 天大计算机应用基础试题答案,天大2019年秋季考试《计算机应用基础》在线考核试题100分答案...
- centos卸载nvidia驱动_在Linux系统中卸载手动安装的Nvidia驱动程序
- 一级建造师(一建)电子证书下载
- 三菱modbusRTU通讯实例_三菱PLC通讯编程实例
- 印有祖师爷图灵的钞票要发行了
- 危机边缘-迷离档案第一季~第五季
- 程序员两道坎:年薪50万,100万!
- 漂亮的桌面UI(Javafx)
- 华为最新鸿蒙消息,华为鸿蒙系统最新消息,华为鸿蒙系统2021
- 史蒂芬·霍金于今日至17日访问香港