As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height.
My concern arises when <v-footer> becomes too large, causing <v-main> to shrink in size. To address this issue, I came up with a logic to ensure that <v-main> occupies at least 70% of the viewport height regardless of browser or device:
<template>
<v-main v-resize="fn_guarantee_container_min_height">
....
</template>
......
methods: {
fn_guarantee_container_min_height() {
const comp_container = document.querySelector("#main--bg");
const num_height__container = comp_container.scrollHeight;
const num_height__container__estimated = window.innerHeight * 0.7;
if(num_height__container < num_height__container__estimated)
comp_container.style = `min-height: ${num_height__container__estimated}px`;
else
comp_container.style = undefined;
},
},
mounted() {
this.fn_guarantee_container_min_height();
},
However, the automatic stretching behavior of <v-main> causes a lag effect as it constantly adjusts its size to fit the viewport (100vh). I'm in search of a solution to avoid this problem. Any ideas or suggestions would be greatly appreciated! Thank you.
- I have tried debouncing and throttling without much success in resolving the issue.