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>
相关推荐
gyratesky1 小时前
支持独立部署的地图方案
前端·gis
a1117761 小时前
图片转3D模型 img2threejs 开源
前端·开源
老王以为1 小时前
走进AI Agent第三篇:让 Agent 记住你
前端·人工智能·机器学习
全栈技术负责人1 小时前
大模型流式输出核心技术:智能 Markdown 渲染引擎方案
前端·javascript·vue.js
码云之上1 小时前
让聊天机器人学会用工具,星悟接 MCP 的实践
前端·人工智能·前端框架
用户921080262861 小时前
从单线程到事件循环:彻底理解 JS 的同步、异步、微任务和宏任务
前端
不一样的少年_1 小时前
明明做了很多事,为什么简历看起来还是没含金量?
前端·后端·招聘
mashang1234567891 小时前
mac安装SnailGitLite并配置Beyond Compare
前端·macos
雪芽蓝域zzs2 小时前
第三十四节:用户新增编辑弹窗增加 el‑tree‑select 部门选择器
前端·javascript·vue.js
程序员老赵2 小时前
Docker 部署 go2rtc:轻松搭建摄像头多协议流媒体平台
前端·docker·直播