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>
相关推荐
qiyue7712 小时前
AI浪潮下,前端的路在何方,附前端转KMP实践
前端·ai编程
Moment12 小时前
历史性突破!LCP 和 INP 终于覆盖所有主流浏览器,iOS 性能盲点彻底消失
前端·javascript·面试
小小荧12 小时前
Hono与Honox一次尝试
前端·后端
菩提小狗12 小时前
第2天:基础入门-Web应用&架构搭建&漏洞&HTTP数据包&代理服务器|小迪安全笔记|网络安全|
前端·安全·架构
ctrigger12 小时前
监理工程师考试题型有哪些?4科题型+分值表
大数据·javascript·算法
咖啡の猫13 小时前
Python集合生成式
前端·javascript·python
dazzle13 小时前
计算机视觉处理(OpenCV基础教学(六):基于HSV颜色空间的目标颜色识别)
javascript·opencv·计算机视觉
2501_9462338913 小时前
Flutter与OpenHarmony我的作品页面实现
android·javascript·flutter
QT 小鲜肉13 小时前
【Linux命令大全】001.文件管理之mtoolstest命令(实操篇)
linux·运维·前端·笔记·microsoft
holeer13 小时前
React UI组件封装实战——以经典项目「个人博客」与「仿手机QQ」为例
前端·javascript·react.js·ui·前端框架·软件工程