编程 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 相关文章推荐

javascript实现在光标处插入指定内容

May 25 Javascript

各情景下元素宽高的获取实现代码

Sep 13 Javascript

基于jQuery实现左右div自适应高度完全相同的代码

Aug 09 Javascript

仿百度输入框智能提示的js代码

Aug 22 Javascript

前台js对象在后台转化java对象的问题探讨

Dec 20 Javascript

js控制input框只读实现示例

Jan 20 Javascript

Ext JS框架中日期函数的用法及日期选择控件的实现

May 21 Javascript

jquery 追加元素append、prepend、before、after用法与区别分析

Dec 02 Javascript

angular-ui-sortable实现可拖拽排序列表

Dec 28 Javascript

原生JS轮播图插件

Feb 09 Javascript

轻量级富文本编辑器wangEditor结合vue使用方法示例

Oct 10 Javascript

策略模式实现 Vue 动态表单验证的方法

Sep 16 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+mysql写的简单留言本实例代码

2008/07/25 PHP

PHP UTF8编码内的繁简转换类

2009/07/20 PHP

处理php自动反斜杠的函数代码

2010/01/05 PHP

浅谈php中mysql与mysqli的区别分析

2013/06/10 PHP

linux使用crontab实现PHP执行计划定时任务

2014/05/10 PHP

老生常谈PHP位运算的用途

2017/03/12 PHP

html读出文本文件内容

2007/01/22 Javascript

javascript实现动态CSS换肤技术的脚本

2007/06/29 Javascript

用js小类库获取浏览器的高度和宽度信息

2012/01/15 Javascript

js跑马灯代码(自写)

2013/04/17 Javascript

jQuery获得内容和属性方法及示例

2013/12/02 Javascript

JS+CSS实现的日本门户网站经典选项卡导航效果

2015/09/27 Javascript

javascript实现粘贴qq截图功能（clipboardData）

2016/05/29 Javascript

微信小程序下拉菜单简单实例

2017/04/13 Javascript

js实现图片上传预览原理分析

2017/07/13 Javascript

基于vue2.0实现仿百度前端分页效果附实现代码

2018/10/30 Javascript

JavaScript switch语句使用方法简介

2019/12/30 Javascript

JS代码触发事件代码实例

2020/01/02 Javascript

ES6中Set和Map用法实例详解

2020/03/02 Javascript

Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

2020/11/18 Vue.js

微信小程序自定义底部弹出框功能

2020/11/18 Javascript

python魔法方法-属性访问控制详解

2016/07/25 Python

Python tkinter模块弹出窗口及传值回到主窗口操作详解

2017/07/28 Python

python清除字符串前后空格函数的方法

2018/10/21 Python

python 获取等间隔的数组实例

2019/07/04 Python

基于python3抓取pinpoint应用信息入库

2020/01/08 Python

django-csrf使用和禁用方式

2020/03/13 Python

公司面试感谢信

2014/02/01 职场文书

运动会致辞稿50字

2014/02/04 职场文书

技术比武方案

2014/05/19 职场文书

学雷锋献爱心活动总结

2015/05/11 职场文书

MySQL 数据类型选择原则

2021/05/27 MySQL

Nginx配置文件详解以及优化建议指南

2021/09/15 Servers

Python使用mitmproxy工具监控手机下载手机小视频

2022/04/18 Python

Redis基本数据类型Zset有序集合常用操作

2022/06/01 Redis

Python测试框架pytest高阶用法全面详解

2022/06/01 Python