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>
相关推荐
深念Y17 小时前
Lenovo XiaoXinAir 14 — 性能模式切换
前端·网络
计算机魔术师17 小时前
Meta突然杀进第一梯队:一个新模型,把AI推理成本打下来8倍
前端
IT_陈寒17 小时前
Redis缓存雪崩把我坑惨了,这次长记性了
前端·人工智能·后端
风骏时光牛马17 小时前
提示词工程:大模型效能挖掘与指令设计实战
前端
仓三17 小时前
Chrome DevTools MCP 上手:让 Coding Agent 自己调试前端页面
前端·chrome devtools·mcp
计算机魔术师18 小时前
扒完Google AI Agent挑战赛的前三名,我发现了一个共同点
前端
独立开发之道18 小时前
【three.js教程】Three.js 运行时更新:矩阵、几何体、材质怎么改才不卡
javascript·矩阵·材质
不可能片场18 小时前
resources/app 为何能覆盖 app.asar
前端·electron
小婉18 小时前
我用 Next.js + React Flow 从零搭建了一个可视化 AI 工作流编排平台
前端·人工智能·node.js
skiyee18 小时前
🚀 用 17 行代码给 UniApp 加上全局登录拦截
前端·uni-app