编程 Javascript

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

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%}

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

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

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

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

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS俄罗斯方块，包含完整的设计理念

Dec 11 Javascript

JS数学函数Exp使用说明

Aug 09 Javascript

js获取html参数及向swf传递参数应用介绍

Feb 18 Javascript

JS函数重载的解决方案

May 13 Javascript

jQuery中的通配符选择器使用总结

May 30 Javascript

js document.getElementsByClassName的使用介绍与自定义函数

Nov 25 Javascript

微信小程序简单实现form表单获取输入数据功能示例

Nov 30 Javascript

vue devtools的安装与使用教程

Aug 08 Javascript

jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】

Dec 29 jQuery

小程序Request的另类用法详解

Aug 09 Javascript

生成无限制的微信小程序码的示例代码

Sep 20 Javascript

JS实现前端动态分页码代码实例

Jun 02 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中ADODB类详解

2008/03/25 PHP

php创建多级目录代码

2008/06/05 PHP

PHP 加密与解密的斗争

2009/04/17 PHP

PHP 翻页实例代码

2009/08/07 PHP

PHP调用wsdl文件类型的接口代码分享

2014/11/19 PHP

Zend Framework入门教程之Zend_Session会话操作详解

2016/12/08 PHP

基于Laravel5.4实现多字段登录功能方法示例

2017/08/11 PHP

php更新cookie内容的详细方法

2019/09/30 PHP

jquery Mobile入门—外部链接切换示例代码

2013/01/08 Javascript

jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)

2013/01/23 Javascript

js弹出层(jQuery插件形式附带reLoad功能)

2013/04/12 Javascript

Javascript中call与apply的学习笔记

2014/09/22 Javascript

Node.js 的异步 IO 性能探讨

2014/10/08 Javascript

如何编写高质量JS代码

2014/12/28 Javascript

10分钟掌握XML、JSON及其解析

2020/12/06 Javascript

jQuery设置Easyui校验规则(推荐)

2016/11/21 Javascript

AJAX和jQuery动态加载数据的实现方法

2016/12/05 Javascript

将 vue 生成的 js 上传到七牛的实例

2017/07/28 Javascript

Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

2017/07/31 Javascript

jquery+css3实现熊猫tv导航代码分享

2018/02/12 jQuery

微信小程序后台持续定位功能使用详解

2019/08/23 Javascript

微信小程序webSocket的使用方法

2020/02/20 Javascript

sharp.js安装过程中遇到的问题总结

2020/04/02 Javascript

[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻

2018/04/09 DOTA

Python编程中NotImplementedError的使用方法

2018/04/21 Python

基于DATAFRAME中元素的读取与修改方法

2018/06/08 Python

Python 仅获取响应头, 不获取实体的实例

2019/08/21 Python

python使用正则来处理各种匹配问题

2019/12/22 Python

django xadmin 管理器常用显示设置方式

2020/03/11 Python

Python爬虫requests库多种用法实例

2020/05/28 Python

Farfetch台湾官网：奢侈品牌时尚购物平台

2019/06/17 全球购物

伊莱克斯阿根廷网上商店：Tienda Electrolux

2021/03/08 全球购物

C#中有没有运算符重载？能否使用指针？

2014/05/05 面试题

法人授权委托书公证范本

2014/09/14 职场文书

2019年第四季度财务部门工作计划

2019/11/02 职场文书

HDFS免重启挂载新磁盘

2022/04/06 Servers