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>
相关推荐
yangcode几秒前
iOS 苹果内购 Storekit 2
前端
LuckySusu1 分钟前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu2 分钟前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu6 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu6 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu10 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在12 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu17 分钟前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate21 分钟前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员
云枫晖34 分钟前
手写Promise-构造函数
前端·javascript