微信小程序高度设置为100%
在网页中设置body,html{height:100%};
将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦。
但是在微信小程序中,是没有dom对象的,但是我们看调试工具可以看到在dom树(我也不知道怎么叫了,就这么叫吧)中,根节点是page,所以我们来试试使用page{height:100%}

<view class='index-wrapper'>
<view class='index-userinfo-container'>
<!-- <image src='{{userInfo.avatar}}'></image>-->
</view>
<view class='index-operate-container'>
<!-- <image src='{{userInfo.avatar}}'></image> -->
</view>
</view>
page{
height: 100%
}
.index-wrapper{
background: blue;
height: 100%;
width: 100%;
display:flex;
flex-direction:column;
}
.index-userinfo-container{
background: black;
height: 50px;
}
.index-operate-container{
background: green;
height: 50px;
}
微信小程序高度设置为100%的更多相关文章
- 微信小程序wxss设置样式
微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...
- 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法
微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...
- 微信小程序----wxss设置样式
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序字体设置
微信小程序css篇----字体(Font) 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "font-style font-variant font-w ...
- 微信小程序如何设置服务器配置
最近微信小程序在it界火了起来,公司也要求我们开始接触微信小程序,废话不多说直接从配置微信小程序开始 1,首先,登录 https://mp.weixin.qq.com,(这里默认你已经获取到微信小程序 ...
- 微信小程序tabbar设置样式在哪里改
微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...
- 微信小程序:设置启动页面
一.功能描述 微信小程序启动时,首先运行app.js,然后才跳转到第一个页面,也就是启动界面. 设置启动界面,只需要调整app.json的pages信息的位置,放在第一条的page记录便是启动界面
- 微信小程序学习笔记(1)-微信小程序样式设置逻辑
1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...
- 微信小程序placeholder设置自定义颜色
原地址链接:https://blog.csdn.net/august_leo/article/details/80877382 这是微信小程序input组件的官方文档描述,下图红框里的placehol ...
随机推荐
- Win10系统如何关闭"启用病毒防护""启用Windows防火墙"提示?
Win10系统如何关闭"启用病毒防护""启用Windows防火墙"提示? 目前已经有不少有用户升级到了win10正式版系统,不过有一些原win7/win8. ...
- httpModules 与 httpHandlers
ASP.NET对请求处理的过程:当请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀(aspx)之后,将这个请求转交给ASPNET_ISAPI.dll,AS ...
- 我是怎样理解web页面的
事实上web页面包括三部分东东 1.页面展示的元素(HTML) 2.页面元素展示的样式(CSS) 3.控制页面元素的交互(JavaScript) 不管页面多么复杂,从这三方面去看,都会得到清晰的认识的 ...
- DOM概念的区分:Attribute和Property, html()及.text(), .val()
Attribute就是dom节点自带的属性 例如:html中常用的id.class.title.align等: <div id="immooc" title="慕课 ...
- VB中的排序问题 15个
首次接触VB,以下就先进行VB中的排序问题 Dim a As Integer Dim b As Integer Dim c As Integer Dim d As ...
- Lua学习十一----------Lua迭代器
© 版权声明:本文为博主原创文章,转载请注明出处 Lua迭代器 - 迭代器(iterator)是一种对象,它能够用来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表容器中的确定的地址 - Lu ...
- Trie树学习
这几天在看Hadoop的排序,用到了有TotalSortPartition,其中用到了一种叫做trie树的数据结构,每次看到这种自己之前没有听过的数据结构就想去看一下原理,然后再网上看几篇博客,有时间 ...
- k8s集群日志
硬件环境: 三台虚拟机, 10.10.20.203 部署docker.etcd.flannel.kube-apiserver.kube-controller-manager.kube-schedule ...
- PHP性能之语言性能优化说明
PHP语言性能优化优化啥? 如下图所示,PHP直接执行的是opcode,所以我们尽量减少扫描和转码解析. 这是我们第一个优化点,尽量使用PHP内置的函数代替我们的代码来实现同样的功能. 和我们自己写的 ...
- phpStorm pycharm编辑器主题修改,自定义颜色
新的启程 注: 本人小菜鸟一枚,内容也是从其他博客中借鉴的,谨以此作为写博客开端. phpstorm修改主题: 1. phpstorm主题下载 http://www.phpstorm-themes.c ...