vue 自适应页面高度

html 复制代码
<template>
  <div :style="{height: this.winHeight + 'px'}">
	<div :style="{height: this.winHeight * 0.3 + 'px'}"></div>
	<div :style="{height: this.winHeight * 0.3 + 'px'}"></div>
	<div>底部的 div 会自适应高度</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      winHeight: 0,
    }
  }
  created() {
	this.getHeight()
  },
  methods: {
	getHeight () {
      const winHeight = window.innerHeight
      // this.winHeight = winHeight - tabs 高度 这段可选
      console.log('winHeight', this.winHeight)
    },
  }
};
</script>
相关推荐
DsirNg12 小时前
上一个封装hooks涉及的知识学习路线
前端·javascript·typescript
遇到困难睡大觉哈哈12 小时前
Harmony os ArkTS 卡片生命周期管理:我怎么把 EntryFormAbility 用顺手的
前端·harmonyos·鸿蒙
凌览12 小时前
女朋友换头像比翻书快?我3天肝出一个去水印小程序
前端·后端·面试
IT_陈寒12 小时前
3个90%开发者都误解的JavaScript原型陷阱:从proto到class的深度剖析
前端·人工智能·后端
9***446312 小时前
Spring 核心技术解析【纯干货版】- Ⅶ:Spring 切面编程模块 Spring-Instrument 模块精讲
前端·数据库·spring
tsumikistep12 小时前
【前端】md5 加密算法
前端
拾忆,想起12 小时前
Dubbo服务调用失败调试指南:从问题定位到快速修复
前端·微服务·架构·dubbo·safari
Json____12 小时前
uni-app-数码购物商城h5手机端-前端静态网页
前端·uni-app·商城
k***858412 小时前
删除文件夹,被提示“需要来自 TrustedInstaller 的权限。。。”的解决方案
android·前端·后端
●VON12 小时前
逐行解读 Flutter 默认模板:从 `main()` 到计数器 App
前端·学习·flutter·openharmony