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>
相关推荐
Neweee3 分钟前
JavaScript进阶内容详解
前端
大鸡爪4 分钟前
Vue3 组件库实战(五):Icon 图标组件的设计与实现
前端·vue.js
bluceli5 分钟前
前端测试实战指南:构建高质量代码的完整体系
前端·测试
行走的陀螺仪5 分钟前
前端公共库开发保姆级路线:从0到1复刻VueUse官方级架构(pnpm+Turbo+VitePress)
前端·架构
顽固_倔强5 分钟前
深入理解 Vue3 数据绑定实现原理
前端·面试
前端付豪5 分钟前
组件拆分重构 App.vue
前端·架构·代码规范
Wect6 分钟前
React 更新触发原理详解
前端·react.js·面试
cxxcode6 分钟前
Web 帧渲染与 DOM 准备
前端
光影少年7 分钟前
React Hooks的理解?常用的有哪些?
前端·react.js·掘金·金石计划
大鸡爪7 分钟前
Vue3 组件库实战(七):从本地到 NPM:版本管理与自动化发布指南(下)
前端·vue.js