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


Posted in Javascript onDecember 14, 2016

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

在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素。

宽度很简单就是width:100%

但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以。

以前我的做法是用js获取屏幕的高度,然后将其赋值给height,

屏幕高度在网页中为:window.innerHeight;

在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值

但是显然通过js来进行的,效率上肯定不如css直接给定样式。

于是我们使用另一种方法:

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

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

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

果然,是可行的。高度占满了整个小程序的窗口。

于是我可以愉快的继续写我的小程序啦。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 #Javascript
bootstrap modal弹出框的垂直居中
Dec 14 #Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 #Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 #Javascript
bootstrap模态框实现拖拽效果
Dec 14 #Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 #Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 #Javascript
You might like
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
如何使用php实现评委评分器
2015/07/31 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
个人授权委托书范本
2014/04/03 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
Django中celery的使用项目实例
2022/07/07 Python