微信小程序高度设置为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 ...
随机推荐
- Android Studio Gradle项目中加入JNI so文件
首先在Android Studio(版本号1.2.2)project的app文件夹下创建整个jni文件夹,jni文件夹里写Android.mk.Application.mk以及各类C/C++和汇编源文 ...
- 【BIEE】08_修改浏览器标题栏显示内容
打开分析,我们可以看到标题栏中显示的BIEE默认的,现在想要把这个修改为自定义的 打开文件路径: D:\obiee\Oracle_BI1\bifoundation\web\msgdb\l_zh-CN\ ...
- Effective C++ Item 25 考虑写出一个不抛异常的swap函数
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:当std::swap对你的类型效率不高时,提供一个swap成员函数,并确定这个函数不抛 ...
- Maven环境下搭建SSH框架
© 版权声明:本文为博主原创文章,转载请注明出处 1.搭建环境 Maven:3.3.9 Struts2:2.5.10 Spring:4.3.8.RELEASE Hibernate:5.1.7.Fina ...
- Git(四):理解和使用分支
分支是Git的核心内容之中的一个,本章将介绍分支的一些知识,这里将继续使用前面创建的版本号库. 假设你跳过了前面章节直接进入本章.能够从Github上克隆这个版本号库: $ git clon ...
- Android Studio 使用笔记:查看类结构和继承关系
选中类 ,按下F4,可以打开类的源代码 在 Eclipse 中我们可以使用 Ctrl + O 组合热键查看类的结构,Android Studio 中也可以做到. View -> Tool Win ...
- Linux下文件的堵塞与非堵塞对部分系统调用的影响
1.基本概念 所谓的堵塞,即内核在对文件操作I/O系统调用时.假设条件不满足(可能须要产生I/O),则内核会将该进程挂起.非堵塞则是发现条件不满足就会马上返回. 此外须要注意的是非堵塞并非轮询.不然就 ...
- dede 文章列表页如何倒序排列
{dede:arclist row='6' typeid='18' orderway='asc'} <li>;<a href="[field:arcurl/]"& ...
- 关于Java静态代码块、初始化块、构造函数的调用顺寻问题?
public class ClassA { public ClassA(){ System.out.println("A 构造..."); } { System.out.print ...
- Binding基础 文摘
简要 Binding基础 Binding源与路径 列举Binding的源 Binding基础 从Coding中看Binding的基础. 先定义一个Student类: public class Stud ...