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


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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
处理canvas绘制图片模糊问题
May 11 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中通过eval实现字符串格式的计算公式
2017/03/18 PHP
ExtJS 入门
2010/10/29 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
JavaScript实现原型封装轮播图
2020/12/27 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python追加元素到列表的方法
2015/07/28 Python
Python解惑之True和False详解
2017/04/24 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python3 shelve模块的详解
2017/07/08 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python如何删除文件中重复的字段
2019/07/16 Python
python实现超市商品销售管理系统
2019/10/25 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python中qutip用法示例详解
2020/10/02 Python
幼儿园招生广告
2014/03/19 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
计划生育宣传标语
2014/06/21 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
教师工作表现评语
2014/12/31 职场文书
黄石寨导游词
2015/02/05 职场文书