小程序 给最外层view设置百分之百高度不起作用

<view class="content">
  <view class="today">
    <view class="info">
      <view class="temp">{{today.wendu}}℃</view>
      <view class="weather">{{today.todayInfo.type}} {{today.todayInfo.fengxiang}} {{today.todayInfo.fengli}}</view>
      <view>友情提示:{{today.ganmao}}</view>
      <view class="city">{{city}}</view>
    </view>
  </view>
  <import src="../template/itemtpl" />
  <view class="future">
    <block wx:for="{{future}}" wx:key="*this">
      <template is="future-item" data="{{item}}" />
    </block>
  </view>
</view>

.content不起作用

.content{
    font-family : 微软雅黑,宋体;
    font-size: 14px;
    background-size:cover;
    height: 100%;
    width:100%;
}

看开发工具调试  content外套一层page,所以再给page一个height:100%就可以了

原文地址:https://www.cnblogs.com/wei-dong/p/9552938.html

时间: 2024-10-19 18:10:40

小程序 给最外层view设置百分之百高度不起作用的相关文章

8. 小程序标题栏和导航栏设置

设置标题栏 标题栏window在app.json文件里面,通过window对象里面的属性进行设置 window 用于设置小程序的状态栏.导航条.标题.窗口背景色. 属性 类型 默认值 描述 最低版本 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"   navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white   navigationBarTit

微信小程序顶部(navigationBar)设置为透明

我记得在微信小程序中导航栏的颜色可以在app.json.  window里面添加navigationBarBackgroundColor属性,但是颜色只能为纯色.不能使用rgb,或者rgba的色号. 但是今天做页面时,发现设计稿如下 但是我的页面如下: 这个顶部的navigationBar有点丑啊,搜了搜怎么解决,经过我一顿砸键盘终于找到了答案 结果: 在app.json里面的window增加navigationStyle:custom ,顶部导航栏就会消失,只保留右上角胶囊状的按钮. 原文地址

微信小程序 Image 图片实现宽度100%,高度自适应

做法如下: 样式设置宽度100%, .img{ width: 100%; } 添加属性 mode="widthFix", <image class="img" src="../../images/hello.png" mode="widthFix"> 即可实现!

小程序遇坑

1.首先无法直接操作dom 脚本逻辑是放在JsCore中运行的,jscore是一个没有窗口对象的环境,所以无法在脚本中使用window,渲染页面只能重新获取数据渲染页面, 因此做到一些下滑加载更多数据时,需要将原本数据存下来,再将新获取数据与原数据进行去重排序(或不需要)整合渲染. 2.scroll-view 如进行聊天操作时,需将最新消息显示在底部,所以获取消息都应将scroll-top显示最底部(99999之类),但实际设置后并无反映. 测试后发现,不能将页面数据与scroll-top数据同

小程序之如和使用view内部组件来进行页面的排版功能

这篇文章主要介绍了关于小程序之如和使用view内部组件来进行页面的排版功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1.默认排版 , 一个父组件里面两个子view 显示效果: 2.先给父view设置一个高度和颜色值,用于看效果 3.实现水平排列和垂直排列的样式 水平排列: 垂直排列(不进行设置,默认垂直排列): 4.实现居中效果 居中效果分为两种情况,依赖于3中的水平排列还是垂直排列. ①.当水平排列的时候 , j

初尝微信小程序2-基本框架

基本框架: .wxml :页面骨架 .wxss :页面样式 .js :页面逻辑    描述一些行为 .json :页面配置 创建一个小程序之后,app.js,app.json,app.wxss是必须的,而且名字也不能随意更改,这些是作用于APP全局的,而用户创建的一些目录,这些可以看做一个个页面,这些目录下面也包含上面所说的.wxml文件,.wxss文件,.js文件,.json文件.这些文件和目录的名字是可以随意取的.有的文件不是必须的,可以参考微信小程序官方文档.如下: 就近关系:对于一个样式

前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)持续更新 &#362414;

原文: http://blog.gqylpy.com/gqy/438 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

微信小程序开发入门

微信小程序 首先说下结构吧,看看小程序到底长什么样子 这是一个微信提供的自己的开发工具,相当于xcode吧,由此也可以看出腾讯的野心并不小啊,左边的就是编辑调试什么的,往右就是一个模拟器,你可以选择iPhone各种型号或者安卓各种型号,在往后这就是目录结构了. 先说一下小程序的代码结构吧,首先他的app service 至少由这三个文件组成,app.js,这个是脚本代码,App()函数就在这里面实现,可以监听处理小程序的生命周期函数,声明全局变量.app.json json文件这个一般都是对程序

微信小程序开发(二)图片上传+服务端接收

文/YXJ 地址:http://blog.csdn.net/sk719887916/article/details/54312573 前几天做了图片上传功能,被坑了一下.我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的php,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的