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>
相关推荐
AICoder码农王几秒前
depcruise 实战:把架构约定变成可执行的检查
前端
paopaokaka_luck几秒前
基于springboot3+vue3+uniapp的河南非遗数字图谱小程序(协同过滤算法、数字图谱展示、ECharts 图形化分析)
java·前端·spring boot·学习·小程序·uni-app·echarts
合橱瑰1 分钟前
Vue3 与 ElementPlus 前端常见错误修复实践
前端·vue.js
PedroQue992 分钟前
v1.4.0:新增 defineUniPage 宏声明页面配置,架构全面重构
前端·vite
晴天1610 分钟前
Node.js 中 `npm install` 命令分析-Day30
前端·npm·node.js
风之舞_yjf12 分钟前
Vue基础(35)_全局事件总线(GlobalEventBus)
前端·vue.js
独立开发之道21 分钟前
【Three.js教程】 图元速查:官方内置的立体图形
开发语言·javascript·ecmascript
程序员小八77721 分钟前
后端转全栈:前端思维转变(Vue 视角)
前端·vue.js·状态模式
RD_daoyi24 分钟前
谷歌改写了76%的标题:超60字符的,95%会被谷歌自己重写
大数据·服务器·开发语言·前端·搜索引擎·html
IMPYLH32 分钟前
HTML 的 <map> 元素
前端·html