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>
相关推荐
wefly20173 分钟前
无需安装、开箱即用!m3u8live.cn 在线 HLS 播放器,调试直播流效率翻倍
前端·后端·python·前端开发工具·后端开发工具
UXbot5 分钟前
为什么 AI 正在重新定义 UI 设计工具的入门门槛
前端·人工智能·低代码·ui·交互·ai编程·ux
柳杉19 分钟前
两款惊艳的 WebGL 开源项目推荐
前端·javascript·数据可视化
给算法爸爸上香25 分钟前
web网页显示点云
前端·3d·web·点云
IT_陈寒26 分钟前
React组件性能翻倍的5个冷门技巧,90%的开发者不知道!
前端·人工智能·后端
jingxindeyi33 分钟前
react实现狼吃羊游戏
javascript·react.js·游戏
小金鱼Y1 小时前
别再乱拷贝了!JS 浅拷贝 vs 深拷贝全解析
前端·javascript
kyriewen2 小时前
Sass 进阶:当 CSS 学会了编程,变量函数循环全都安排上
前端·css·scss
海带先森2 小时前
python 虚拟环境的创建
前端
lovemiss2 小时前
解码本质:claude code是怎么运行的
前端