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>
相关推荐
weixin_440730504 小时前
playwright实战-渠道应用操作
开发语言·前端·python
lhldsg4 小时前
从零构建智慧场馆解决方案小程序:开发全流程实战
java·前端·小程序
IMPYLH4 小时前
HTML 的 <rp> 元素
前端·javascript·html
晴天165 小时前
npm install -f(--force)深度解析:作用原理、报错根源与风险避坑指南
前端·npm·node.js
IT_陈寒5 小时前
React的状态更新竟然不是同步的?!坑了我一整天
前端·人工智能·后端
科里 Coralyx5 小时前
CoT Toolformer ReAct:工具调用、推理链与 Agent 的起源
前端·react.js·前端框架
xy34535 小时前
谷歌Lighthouse安装指南(Chrome扩展程序可视化操作)
前端·chrome·测试工具·lighthouse
乱码三千5 小时前
密码管理工具站正式上线啦
前端·html·github
IMPYLH5 小时前
HTML 的 <rt> 元素
前端·html
单线程_015 小时前
从案例分析 Vue3 Tokenizer+Parser 源码五
前端·javascript·vue.js