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>
相关推荐
仿生狮子6 小时前
把 Git 提交历史变成一条流动的河——Project River
vue.js·设计·vibecoding
LCG元9 小时前
STM32实战:基于STM32F103的Bootloader设计与IAP在线升级
javascript·stm32·嵌入式硬件
xixingzhe210 小时前
idea启动vue项目
java·vue.js·intellij-idea
超级无敌暴龙兽10 小时前
和我一起刷面试题呀
前端·面试
wzl2026121310 小时前
企业微信定时群发技术实现与实操指南(原生接口+工具落地)
java·运维·前端·企业微信
小码哥_常10 小时前
Robots.txt:互联网爬虫世界的“隐形规则”
前端
小码哥_常10 小时前
Android开发神器:AndroidAutoSize,轻松搞定屏幕适配
前端
前端一小卒10 小时前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
不停喝水11 小时前
【AI+Cursor】 告别切图仔,拥抱Vibe Coding: AI + Cursor 开启多模态全栈新纪元 (1)
前端·人工智能·后端·ai·ai编程·cursor