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>
相关推荐
沐浴露z1 分钟前
详解Javascript精度丢失以及解决方案
java·javascript
今天不要写bug4 分钟前
基于qrcode前端实现链接转二维码的生成与下载
前端·javascript·typescript·vue
JIngJaneIL22 分钟前
基于Java + vue干洗店预约洗衣系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
搬山境KL攻城狮22 分钟前
记-SPA单页面应用Chrome自动翻译导致中文错别字问题
前端·chrome
HIT_Weston31 分钟前
61、【Ubuntu】【Gitlab】拉出内网 Web 服务:Gitlab 配置审视(五)
前端·ubuntu·gitlab
剑小麟43 分钟前
vue2项目中安装vant报错的解决办法
vue.js·java-ee·vue
旺仔Sec1 小时前
2026年度河北省职业院校技能竞赛“Web技术”(高职组)赛项竞赛任务
运维·服务器·前端
用户4099322502121 小时前
Vue的Class绑定对象语法如何让动态类名切换变得直观高效?
前端·ai编程·trae
瘦的可以下饭了1 小时前
Day01-API
javascript
GIS之路1 小时前
GIS 数据转换:GDAL 实现将 CSV 转换为 Shp 数据(一)
前端