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 分钟前
开发了几个app后,我在React Native用到的几个库的推荐
android·前端·react native
消失的旧时光-194320 分钟前
Kotlinx.serialization 对多态对象(sealed class )支持更好用
java·服务器·前端
少卿39 分钟前
React Compiler 完全指南:自动化性能优化的未来
前端·javascript
广州华水科技40 分钟前
水库变形监测推荐:2025年单北斗GNSS变形监测系统TOP5,助力基础设施安全
前端
快起来搬砖了41 分钟前
Vue 实现阿里云 OSS 视频分片上传:安全实战与完整方案
vue.js·安全·阿里云
广州华水科技41 分钟前
北斗GNSS变形监测一体机在基础设施安全中的应用与优势
前端
七淮43 分钟前
umi4暗黑模式设置
前端
8***B43 分钟前
前端路由权限控制,动态路由生成
前端
爱隐身的官人1 小时前
beef-xss hook.js访问失败500错误
javascript·xss
军军3601 小时前
从图片到点阵:用JavaScript重现复古数码点阵艺术图
前端·javascript