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>
相关推荐
之歆8 小时前
Day16_JavaScript 轮播图与事件工程实战(下篇)
服务器·开发语言·前端·javascript·网络·性能优化
沄媪8 小时前
CSRF 跨站请求伪造
前端·ctf·csrf
kyriewen8 小时前
我关掉了Copilot:因为我写的代码出现在了别人的建议里
前端·javascript·ai编程
欧雷殿9 小时前
从「吸引子引导工程」看我的「一人公司」实践
前端·人工智能·后端
SmartRadio9 小时前
STM32WLE5 LoRa Smart TDMA 完整协议栈实现(工程级可直接编译)-【1】
javascript·stm32·单片机·嵌入式硬件·lora·自组网·smart tdma
wordbaby9 小时前
React Native + RNOH:一个 `lazyScreen()` 搞定 48 页面启动懒加载
前端·react native
竹林8189 小时前
用 wagmi v2 踩坑两天,我终于搞懂了多链钱包切换
前端·javascript
吃乔巴的糖9 小时前
Vue 3 打印模板设计器 (print-canvas-designer)
前端·vue.js
名字都不重要何况昵称10 小时前
canvas 分层渲染思路和脏矩形处理
前端·canvas