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>
相关推荐
奇奇怪怪的3 分钟前
检索增强——混合检索、Re-rank 与 Query 优化
前端
user62229864925817 分钟前
React 常用技术知识全景:从组件到 Hooks 的系统理解
前端
麻辣凉茶7 分钟前
给阿嬤一封来自云端的信(上)
前端·node.js
前端缘梦8 分钟前
LangGraph 实战:从 0 到 1 构建 AI 代码生成工作流
前端·程序员·全栈
weedsfly8 分钟前
栈和堆:JavaScript 内存的“旅馆”和“仓库”
前端·javascript·面试
用户059540174469 分钟前
大模型长上下文遗忘排查实录:用 Playwright 自动化测试,揪出了 90% 的存储序列化 bug
前端·css
向阳而生66010 分钟前
文件上传也能玩出花?Vue3 教你优雅实现“选择文件”和“选择文件夹”🚀
vue.js
36304584111 分钟前
Signal 带来的架构问题思考
前端·vue.js
达达尼昂16 分钟前
Claude : 如何设计可控的agent-loops
前端·人工智能·后端