网页或微信小程序中使元素占满整个屏幕高度
在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素。
宽度很简单就是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%}
果然,是可行的。高度占满了整个小程序的窗口。
于是我可以愉快的继续写我的小程序啦。
网页或微信小程序中使元素占满整个屏幕高度的更多相关文章
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 全栈开发工程师微信小程序-中
全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 全栈开发工程师微信小程序-中(下)
全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- 在微信小程序中使用LeanCloud(一)
之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数 ...
- 微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({ index1: e.detail.value }) 比如在函数里面修改数据 bindFaChange1: fun ...
- 微信小程序中的 hover-class
微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button ...
- 微信小程序中获取高度及设备的方法
由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...
随机推荐
- Atitit 项目语言的选择 java c#.net php??
Atitit 项目语言的选择 java c#.net php?? 1.1. 编程语言与技术,应该使用开放式的目前流行的语言趋势1 1.2. 从个人职业生涯考虑,java优先1 1.3. 从项目实际来 ...
- MySQL碎碎念
1. 如何修改Mysql的用户密码 mysql> update mysql.user set password=password('hello') where user='root'; mysq ...
- HA 高可用软件系统保养指南
又过了一年 618,六月是公司一年一度的大促月,一般提前一个月各系统就会减少需求和功能的开发,转而更多去关注系统可用性.稳定性和管控性等方面的非功能需求.大促前的准备工作一般叫作「备战」,可以把线上运 ...
- Web应用之LAMP源码环境部署
一.LAMP环境的介绍 1.LAMP环境的重要性 思索许久,最终还是决定写一篇详细的LAMP的源码编译安装的实验文档,一来是为了给自己一个交代,把技术进行系统的归纳,将技术以极致的形式呈现出来,做为一 ...
- 【python之路3】if 语句
1.if语句用法(if....else....) #!/usr/bin/env python # -*- coding:utf-8 -*- my_name = raw_input("plea ...
- angularJS(6)
angularJS(6) 一:angularJs的事件. 1.ng-click指令定义了AngularJS点击事件. <div ng-app="myapp" ng-contr ...
- 2DToolkit官方文档中文版打地鼠教程(三):Sprite Collections 精灵集合
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
- ASP.NET 5运行时升级到Beta5
在Visual Studio 2015 RTM和Windows 10正式发布之前,微软把开源.NET升级到了beta5,带来了一些增强和改变.和Visual Studio 2015 RC一起安装的AS ...
- Node.js实现RESTful api,express or koa?
文章导读: 一.what's RESTful API 二.Express RESTful API 三.KOA RESTful API 四.express还是koa? 五.参考资料 一.what's R ...
- 自定义Sublime Text的图标
sublime text很赞,windows上最接近mac逼格的轻量编辑器,对于我这样比较喜欢格调的人来说,简直不二之选啊. 美中不足的是,看久了觉得它的图标似乎不是很上心.现在都流行扁平化了而它还停 ...