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>
相关推荐
q_1913284695几秒前
基于Springboot+uniapp的智慧停车场收费小程序
java·vue.js·spring boot·小程序·uni-app·毕业设计·计算机毕业设计
灵犀坠3 分钟前
前端面试&项目实战核心知识点总结(Vue3+Pinia+UniApp+Axios)
前端·javascript·css·面试·职场和发展·uni-app·html
GISer_Jing4 分钟前
SSE Conf大会分享——大模型驱动的智能 可视分析与故事叙述
前端·人工智能·信息可视化
Lovely Ruby6 分钟前
前端er Go-Frame 的学习笔记:实现 to-do 功能(一)
前端·学习·golang
fruge7 分钟前
Vue3 与 Vue2 核心差异:响应式原理、生命周期及迁移方案
前端·javascript·vue.js
zlpzlpzyd12 分钟前
vue.js 3项目整合vue-router 4的问题
前端·javascript·vue.js
crary,记忆13 分钟前
Angular.json中的commonChunk 的作用
前端·javascript·学习·angular.js
Highcharts.js13 分钟前
Highcharts 仪表板 CSS 样式定制使用说明
前端·css·仪表板·highcharts·css 样式