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>
相关推荐
湛海不过深蓝几秒前
【procomponents】根据表单查询表格数据的两种写法
前端·javascript·react.js
大Mod_abfun1 分钟前
AntdUI教程#1ChatList交互(vb.net)
服务器·前端·ui·交互·antdui·聊天框
Beth_Chan3 分钟前
Stock Trading - React
javascript·react.js
憧憬成为web高手3 分钟前
xss学习记录--xss-lab部署
前端·学习·xss
窝子面4 分钟前
十四、弹窗组件
前端
局i5 分钟前
从零封装第一个 Vue 组件:极简入门指南
前端·javascript·vue.js
Jave21085 分钟前
Vue下一个大版本会是怎样?它的最终目标是怎样的?
前端·vue.js·经验分享
JamesYoung79715 分钟前
第三部分 — 服务工作者(后台)chrome.runtime 是什么(在 MV3 的说法中)
前端·javascript·chrome