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>
相关推荐
Revio Lab7 分钟前
把 AI 生成的 HTML 当 Markdown 来管:Web-Doc 自托管文档站实践
前端·html·mcp·html文档
之歆18 分钟前
DAY_13DOM操作完全指南DOM基础API与节点操作(上)
开发语言·前端·javascript·ecmascript
zhoumeina9921 分钟前
如何保证不同位置切换合成底图的渲染顺序
java·前端·javascript
海上彼尚23 分钟前
Nodejs也能写Agent - 3.基础篇 - Tools 与 Tool Calling
前端·人工智能·后端·node.js
用户1257585243628 分钟前
GoFrame + Vue3 后台管理框架,CRUD 代码生成器一键搭 RBAC 权限系统
前端
七十二時_阿川29 分钟前
Electron 如何自定义菜单?这篇帮你实现原生体验!
前端·electron
bot55566633 分钟前
企业微信ipad协议的消息引用与回复机制
javascript
七十二時_阿川34 分钟前
Electron App 速查表:生命周期事件、方法、平台差异
前端·electron
七十二時_阿川34 分钟前
Electron 多显示器开发?这篇帮你搞定屏幕坐标与窗口定位!
前端·electron
七十二時_阿川36 分钟前
Electron Tray API 详解:托盘图标、右键菜单、气泡通知
前端·electron