在网页中设置body,html{height:100%};

将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦。

但是在微信小程序中,是没有dom对象的,但是我们看调试工具可以看到在dom树(我也不知道怎么叫了,就这么叫吧)中,根节点是page,所以我们来试试使用page{height:100%}

  1. <view class='index-wrapper'>
  2. <view class='index-userinfo-container'>
  3. <!-- <image src='{{userInfo.avatar}}'></image>-->
  4. </view>
  5. <view class='index-operate-container'>
  6. <!-- <image src='{{userInfo.avatar}}'></image> -->
  7. </view>
  8. </view>
  1. page{
  2. height: 100%
  3. }
  4. .index-wrapper{
  5. background: blue;
  6. height: 100%;
  7. width: 100%;
  8. display:flex;
  9. flex-direction:column;
  10. }
  11. .index-userinfo-container{
  12.  
  13. background: black;
  14. height: 50px;
  15. }
  16. .index-operate-container{
  17.  
  18. background: green;
  19. height: 50px;
  20. }

微信小程序高度设置为100%的更多相关文章

  1. 微信小程序wxss设置样式

    微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...

  2. 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...

  3. 微信小程序----wxss设置样式

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  4. 微信小程序字体设置

    微信小程序css篇----字体(Font) 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "font-style font-variant font-w ...

  5. 微信小程序如何设置服务器配置

    最近微信小程序在it界火了起来,公司也要求我们开始接触微信小程序,废话不多说直接从配置微信小程序开始 1,首先,登录 https://mp.weixin.qq.com,(这里默认你已经获取到微信小程序 ...

  6. 微信小程序tabbar设置样式在哪里改

    微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...

  7. 微信小程序:设置启动页面

    一.功能描述 微信小程序启动时,首先运行app.js,然后才跳转到第一个页面,也就是启动界面. 设置启动界面,只需要调整app.json的pages信息的位置,放在第一条的page记录便是启动界面

  8. 微信小程序学习笔记(1)-微信小程序样式设置逻辑

    1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...

  9. 微信小程序placeholder设置自定义颜色

    原地址链接:https://blog.csdn.net/august_leo/article/details/80877382 这是微信小程序input组件的官方文档描述,下图红框里的placehol ...

随机推荐

  1. Android Studio Gradle项目中加入JNI so文件

    首先在Android Studio(版本号1.2.2)project的app文件夹下创建整个jni文件夹,jni文件夹里写Android.mk.Application.mk以及各类C/C++和汇编源文 ...

  2. 【BIEE】08_修改浏览器标题栏显示内容

    打开分析,我们可以看到标题栏中显示的BIEE默认的,现在想要把这个修改为自定义的 打开文件路径: D:\obiee\Oracle_BI1\bifoundation\web\msgdb\l_zh-CN\ ...

  3. Effective C++ Item 25 考虑写出一个不抛异常的swap函数

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:当std::swap对你的类型效率不高时,提供一个swap成员函数,并确定这个函数不抛 ...

  4. Maven环境下搭建SSH框架

    © 版权声明:本文为博主原创文章,转载请注明出处 1.搭建环境 Maven:3.3.9 Struts2:2.5.10 Spring:4.3.8.RELEASE Hibernate:5.1.7.Fina ...

  5. Git(四):理解和使用分支

         分支是Git的核心内容之中的一个,本章将介绍分支的一些知识,这里将继续使用前面创建的版本号库. 假设你跳过了前面章节直接进入本章.能够从Github上克隆这个版本号库: $ git clon ...

  6. Android Studio 使用笔记:查看类结构和继承关系

    选中类 ,按下F4,可以打开类的源代码 在 Eclipse 中我们可以使用 Ctrl + O 组合热键查看类的结构,Android Studio 中也可以做到. View -> Tool Win ...

  7. Linux下文件的堵塞与非堵塞对部分系统调用的影响

    1.基本概念 所谓的堵塞,即内核在对文件操作I/O系统调用时.假设条件不满足(可能须要产生I/O),则内核会将该进程挂起.非堵塞则是发现条件不满足就会马上返回. 此外须要注意的是非堵塞并非轮询.不然就 ...

  8. dede 文章列表页如何倒序排列

    {dede:arclist row='6' typeid='18' orderway='asc'} <li>;<a href="[field:arcurl/]"& ...

  9. 关于Java静态代码块、初始化块、构造函数的调用顺寻问题?

    public class ClassA { public ClassA(){ System.out.println("A 构造..."); } { System.out.print ...

  10. Binding基础 文摘

    简要 Binding基础 Binding源与路径 列举Binding的源 Binding基础 从Coding中看Binding的基础. 先定义一个Student类: public class Stud ...