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>
相关推荐
t***5441 分钟前
如何在 Dev-C++ 中设置 MinGW 和 Clang 的路径
java·前端·c++
拜托啦!狮子4 分钟前
安装EnsDb.Hsapiens.v86
java·服务器·前端
金玉满堂@bj10 分钟前
playwright使用教程总结
前端
scheduleTTe32 分钟前
Nginx
服务器·前端·nginx
techdashen41 分钟前
不开端口,不配 DNS,用树莓派在家搭一个公网可访问的 Web 服务
前端·网络·智能路由器
早起傻一天~G1 小时前
vue2+element-UI表单封装
前端·vue.js·ui
pixcarp1 小时前
Nginx实战部署与踩坑总结 附带详细配置教程
服务器·前端·后端·nginx·golang
Live&&learn1 小时前
Vue项目打包后内联字符串不显示的原因
前端·javascript·vue.js
爱上好庆祝1 小时前
学习js的第三天
前端·css·人工智能·学习·计算机外设·js
aq55356001 小时前
Chrome如何重塑Web标准的未来格局
前端·chrome