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>
相关推荐
daols8831 分钟前
vxe-table 如何实现跟 excel 一样的筛选框,支持字符串、数值、日期类型筛选
前端·javascript·excel·vxe-table
青青子衿悠悠我心36 分钟前
围小猫秘籍
前端
私人珍藏库42 分钟前
[Windows] Chrome_Win64_v142.0.7444.163 便携版
前端·chrome
Wect1 小时前
Monorepo 架构全解析:从概念到落地的完整指南
前端
Zyx20071 小时前
前端直连大模型:用原生 JavaScript 调用 DeepSeek API
javascript·deepseek
panda49191 小时前
css主流布局
前端·css
一千柯橘1 小时前
vite 下使用 Module Federation
前端
e***58231 小时前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
风止何安啊1 小时前
快 2026 年了,谁还在为 this 挠头?看完这篇让你彻底从懵圈到精通
前端·javascript·node.js
烟袅1 小时前
从零开始:前端如何通过 `fetch` 调用 大模型(详解)
前端·javascript·llm