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>
相关推荐
paopaokaka_luck几秒前
社区服务平台(加权协同过滤推荐、Jieba中文词频分析、WebSocket实时聊天、求助处理闭环、 活动积分闭环、ECharts多维分析)
java·前端·spring boot·mysql·echarts·mybatis
墨林陌12 分钟前
翻完 DeepSeek 的 GitHub 仓库,我发现 V5 的发布路已经修好了
前端
Antruly27 分钟前
uvscope:Web 调试界的瑞士军刀
前端
计算机魔术师39 分钟前
Anthropic S-1 披露:半年前发布的模型,已贡献不了多少收入了
前端
qq_340040881 小时前
idea2021版,vue项目的package.json不展示scripts的绿色箭头
javascript·vue.js·json
qq_364682151 小时前
录音APP怎么切换语言?多语言版本如何使用
java·服务器·前端
2601_968900771 小时前
玻璃深加工的工艺窗口:4 道工序的温度与时间参数边界
android·java·javascript
志尊宝1 小时前
AI原生前端开发(037):AI辅助的Vue 3开发最佳实践
前端·vue.js·ai-native
中科三方1 小时前
AI时代新攻击面:悬空DNS记录正在成为黑客的低成本入侵入口
服务器·前端·人工智能
程序员大阳1 小时前
副队长JavaScript教程(53)-DOM操作元素的属性
javascript·dom·属性·setattribute·getattribuite