Блог

Я довольно новичок в Vuetify, поэтому, пожалуйста, поймите. Что я понял <v-main> , так это то, что автоматически заполняет(растягивается) все пустые пространства между <v-app-bar> и <v-footer> для того, чтобы занять весь размер(высоту) видового экрана.
Что меня на самом деле беспокоит, так это когда <v-footer> становится слишком большим. это приведет к коррозии слишком большого количества высот обзорного экрана, так что он может оказаться <v-main> слишком маленьким. поэтому я сделал логику, подобную приведенной ниже, чтобы гарантировать, что мой <v-main> размер будет составлять не менее 70% от размера окна просмотра(независимо от того, как/когда я изменяю размер браузера или какой браузер, какое устройство я использую).:

 <template>
    <v-main v-resize="fn_guarantee_container_min_height">
    ....
</template>

......

    methods: {
        fn_guarantee_container_min_height() {
            // comp_container : select the background image inside of <v-main>.
            // I know it's not that good way but I couldn't help as needed.
            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();
    },
 

Но, как вы знаете, v-main растягивается, заполняя достаточно пустых мест, чтобы весь компонент соответствовал высоте окна просмотра(100 В ч). таким образом, по вышеприведенной логике возникает такой запаздывающий эффект(само растяжение и сжатие), который абсолютно не предназначен. Как я могу достичь своей цели? Мне нужна серебряная пуля! Спасибо.

• Я уже пробовал дебютировать и дросселировать, Но, как я и ожидал, это не принесло никакого впечатляющего результата.

@lee можете ли вы просто добавить класс в v-main и с помощью css add min-height: 70vh; ?

т.е.

 
<v-main class="v-main-container">

.....

<style lang="scss" scoped>

.v-main-container {
  min-height: 70vh;
}

</style>