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>
相关推荐
麦麦大数据10 分钟前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析
Boale_H14 分钟前
如何获取npm的认证令牌token
前端·npm·node.js
qq_3391911414 分钟前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
帅气的花泽类16 分钟前
npm error code ERR_SSL_TLSV1_UNRECOGNIZED_NAME
前端·npm·node.js
明仔的阳光午后1 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
sorryhc2 小时前
Webpack中的插件流程是怎么实现的?
前端·webpack·架构
残冬醉离殇2 小时前
原来dom树就是AST!!!
前端
~无忧花开~2 小时前
掌握Axios:前端HTTP请求全攻略
开发语言·前端·学习·js
橙某人3 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
小Pawn爷3 小时前
构建Django的Web镜像
前端·python·docker·django