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

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

在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。

宽度很简单就是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%}

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

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

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

赞 (0)

相关推荐

  • JavaScript使用DeviceOne开发实战（二） 生成调试安装包

    JavaScript使用DeviceOne开发实战（二） 生成调试安装包

    在上篇文章给大家介绍了JavaScript使用DeviceOne开发实战(一) 配置和起步,本篇文章继续给大家介绍关于javascript实战相关内容,一起学习吧. 生成调试安装包 首先需要说明的是,这个步骤并不是每次调试App都必须的,大部分情况生成一次调试安装包,安装到手机上之后就可以忽略整个这个步骤.因为调试安装包包含了很多原生组件,都是可以定制勾选的,如果你需要额外增加一些原生组件,则需要勾选更多的组件并要重新生成调试安装包. 点击调试程序的菜单里的"Build Debug Versio

  • 微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛

  • 微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

  • DeviceOne 让你一见钟情的App快速开发平台

    DeviceOne是目前唯一的一款产品实现了所有的UI都是纯原生的,DeviceOne这个模型中所有UI组件功能组件都已经被抽象成可被自由扩展的跨平台组件,就连Webkit本身在模型中也仅仅退化成一个普通的UI组件而已,App开发者可以自由选择js脚本.lua脚本甚至python脚本来编写业务逻辑,让昂贵的原生开发人员能够更专注于底层技术创新和组件封装,让应用开发人员可以更加专注于具体项目的业务需求,实现原生开发和应用开发的分离,也就是让逻辑和控制充分解耦. 接触 DeviceOne 要从15年

  • JavaScript使用DeviceOne开发实战（三）仿微信应用

    JavaScript使用DeviceOne开发实战（三）仿微信应用

    这是一个系列的文档,长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用,我们会最大化的实现这些应用的每一个功能和细节,不只停留在简单的UI模仿和Demo阶段,而是一个基本可以使用的实际App. 在实现的过程中,会有很多困难,还会发现有一些功能目前缺乏组件支持而无法实现,也会碰见各种移动开发中都会碰到的常见技术问题.一步一步的操作和问题的解决可以让开发者直观的了解通过DeviceOne如何开发一个实际App,也可以了解移动开发本身的很多技术细节,可以让App开发者少走很多弯路. 这

  • JavaScript使用DeviceOne开发实战（一) 配置和起步

    JavaScript使用DeviceOne开发实战（一) 配置和起步

    2015 年 9 月 底,DeviceOne Release发布.至此,DeviceOne 基本完成了对多端的支持.基于 DeviceOne 可以: HTML5.Android.iOS.Windows 多端代码一次编写,各处复用: 实时简单部署. 本地化UI 在接下来的时间,我会通过一系列文章来介绍 DeviceOne.本文介绍环境配置以及如何建立一个简单的项目.(注:本篇文章 iOS 和 Android和Windows 开发都适用.) 目前使用 DeviceOne 开发可以在Windows 或

  • 使用DeviceOne实现微信小程序功能

    使用DeviceOne实现微信小程序功能

    微信小程序即将推出,还没推出就火的不行了.基于微信这个巨大平台,小程序必然能有巨大成功.不过它并不能完全取代App,该开发App还得开发.如果我们自己想实现一个基于自己的APP包含类似微信的小程序功能,该如何实现了?我们先来看看小程序的技术特点. 小程序的特点 1. 跨平台,微信就像JRE,在不同操作系统上都有实现,所以微信上的小程序就像运行在JRE上的java程序,从而实现跨平台.另外解决了多平台多机型的适配问题. 2. 体验好,webview加载html是最容易的跨平台方式,但是在手机上的体

  • 微信小程序 textarea 详解及简单使用方法

    微信小程序 textarea 简易解决方案 微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值. 虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行bindblur事件,所以在js文件取不到输入值, 解决方法:结合from表单,textarea文本框输入后,再去点击提交按钮,这时会先执行textarea事件(获取文本框输入内容),再去执行数据提交,这样问题就解决了 wxml文件代码: <form bin

  • 微信小程序 Windows2008 R2服务器配置TLS1.2方法

    微信小程序 Windows2008 R2服务器配置TLS1.2方法

    微信小程序 Windows2008 R2服务器配置TLS1.2方法 微信小程序免费SSL证书https.TLS版本问题的解决方案<二十四>request:fail错误(含https解决方案)(真机预览问题把下面的代码复制到PowerShell里运行一下,然后重启服务器.# Enables TLS 1.2 on ... 请首先阅读本文: 微信小程序免费SSL证书https.TLS版本问题的解决方案<二十四>request:fail错误(含https解决方案)(真机预览问题 把下面的代

  • JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

    JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

    大家没有进行开发之前首先需要考虑系统的差异性,比如说IOS手机有没有回退键,所以在开发时一定要考虑二级解密需要有回退键,否则ios的手机就会陷入到这个页面回不去. 安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连续按回退键两次才退出系统,以此防止用户误按回退键,具体代码实现如下: [mw_shl_code=javascript,true]page.on("back", function(){ if (canBack) { global.exit(); } else { nf.t

随机推荐