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


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吗?
Feb 24 Javascript
js form action动态修改方法
Nov 04 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
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 中文处理技巧
2010/04/25 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP实现递归无限级分类
2015/10/22 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
python实现单向链表详解
2018/02/08 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python 三元运算符使用解析
2019/09/16 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
大客户销售经理职责
2013/12/04 职场文书
管理失职检讨书
2014/02/12 职场文书
春风行动实施方案
2014/03/28 职场文书
联村联户简报
2015/07/21 职场文书
银行服务理念口号
2015/12/25 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python