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>
相关推荐
杨艺韬40 分钟前
vite内核解析-第2章 架构总览
前端·vite
我是伪码农1 小时前
外卖餐具智能推荐
linux·服务器·前端
qq_283720051 小时前
Python Celery + FastAPI + Vue 全栈异步任务实战
vue.js·python·fastapi
2401_885885042 小时前
营销推广短信接口集成:结合营销策略实现的API接口动态变量填充方案
前端·python
小李子呢02112 小时前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
程序员buddha2 小时前
深入理解ES6 Promise
前端·ecmascript·es6
吴声子夜歌2 小时前
ES6——Module详解
前端·ecmascript·es6
剪刀石头布啊3 小时前
原生form发起表单干了啥
前端
剪刀石头布啊3 小时前
表单校验场景,如何实现页面滚动到报错位置
前端
gyx_这个杀手不太冷静3 小时前
大人工智能时代下前端界面全新开发模式的思考(二)
前端·架构·ai编程