クラス名から高さをとってcss変数に入れる メモ

高さを取得

html部分

app.vue

<template>
　//高さを取ってきたいとこ
  <v-app ref="app">
    <v-main>
      <nuxt />
　　　　//使うとこ
      <div class="aaa"/>
    </v-main>
    <the-footer />
  </v-app>
</template>

クラス名から要素の高さをとる時

app.vue

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {}
  },
  mounted () {
    //appがクラス名
　　//変数appHeightに取得した高さを代入
    const appHeight = this.$refs.app.$el.clientHeight
   //css変数(--height)に代入
    document.documentElement.style.setProperty('--height', `${appHeight}px`)
  }
})
</script>

取ってきた要素の高さを使う時

app.vue

<style lang="scss">

.aaa {
  //ここで使う
  height: var(--height, 100vh);
  background-color: red;
}

</style>