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>
相关推荐
驳是20 分钟前
TS 项目升级 React 18 到 19 的一些事情
前端·react.js·typescript
禁止摆烂_才浅33 分钟前
React - 【useEffect 与 useLayoutEffect】 区别 及 使用场景
前端·react.js
5***o5001 小时前
React安全
前端·安全·react.js
喵个咪1 小时前
Qt 6 实战:C++ 调用 QML 回调方法(异步场景完整实现)
前端·c++·qt
g***B7381 小时前
JavaScript数据可视化应用
javascript·信息可视化·数据分析
F***c3251 小时前
React自然语言处理应用
前端·react.js·自然语言处理
1***Q7841 小时前
React项目
前端·javascript·react.js
幸福专买店1 小时前
【Flutter】flutter 中 包裹内容显示 的设置方式
前端·javascript·flutter
U***49832 小时前
React Native性能分析
javascript·react native·react.js
和和和2 小时前
🗣️面试官: 那些常见的前端面试场景问题
前端·javascript·面试