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>
相关推荐
LawrenceLan6 分钟前
Flutter 零基础入门(二十一):Container、Padding、Margin 与装饰
开发语言·前端·flutter·dart
967722 分钟前
初始web server的认识1---webserver的用途和工作流程
前端
叫我:松哥33 分钟前
基于神经网络算法的多模态内容分析系统,采用Flask + Bootstrap + ECharts + LSTM-CNN + 注意力机制
前端·神经网络·算法·机器学习·flask·bootstrap·echarts
vx_bisheyuange39 分钟前
基于SpringBoot的知识竞赛系统
大数据·前端·人工智能·spring boot·毕业设计
搂着猫睡的小鱼鱼41 分钟前
签名逆向与浏览器自动化 / 动态渲染抓取京东评论信息
前端·javascript·自动化
凯新生物1 小时前
Mannose-PEG-CY5.5,CY5.5-PEG-Mannose技术手册:分子量选型与溶解性说明
javascript·c#·bash·symfony
wangbing11251 小时前
ES6 (ES2015)新增的集合对象Set
前端·javascript·es6
nvd111 小时前
企业级 LLM 实战:在受限环境中基于 Copilot API 构建 ReAct MCP Agent
前端·copilot
+VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue校园实验室管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
Dragon Wu1 小时前
TailWindCss cva+cn管理样式
前端·css