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


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 相关文章推荐
DOM操作一些常用的属性汇总
Mar 13 Javascript
详解iframe与frame的区别
Jan 13 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
小程序实现录音上传功能
Nov 22 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php 的反射详解及示例代码
2016/08/25 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
javascript add event remove event
2008/04/07 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python代码的打包与发布详解
2014/07/30 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python判断输入日期为第几天的实例
2018/11/13 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
捐赠仪式主持词
2014/03/19 职场文书
职位说明书范文
2014/05/07 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
委托书的样本
2015/01/28 职场文书
Java使用HttpClient实现文件下载
2022/08/14 Java/Android