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>
相关推荐
excel4 小时前
HBuilderX 配置 adb.exe + 模拟器端口一体化完整指南
前端
拖拉斯旋风4 小时前
与 AI 协作的新范式:以文档为中心的开发实践
前端
dualven_in_csdn4 小时前
【electron】解决CS里的全屏问题
前端·javascript·electron
库克表示5 小时前
MessageChannel-通信机制
前端
不爱吃糖的程序媛5 小时前
Electron 文件选择功能实战指南适配鸿蒙
javascript·electron·harmonyos
拖拉斯旋风5 小时前
深入理解 Ajax:从原理到实战,附大厂高频面试题
前端·ajax
用户4099322502125 小时前
Vue 3响应式系统的底层机制:Proxy如何实现依赖追踪与自动更新?
前端·ai编程·trae
www_stdio5 小时前
使用 Ajax 实现异步数据请求:从原理到实践
javascript·ajax·html
却尘5 小时前
一个"New Chat"按钮,为什么要重构整个架构?
前端·javascript·next.js
ERIC_s5 小时前
记一次 Next.js + K8s + CDN 缓存导致 RSC 泄漏的排查与修复
前端·react.js·程序员