英文:
How can I make my Vuetify layout use all the available vertical space?
问题
I inherited a project where I need the layout to use as much viewport space as possible both horizontally and vertically, and resize nicely too.
My layout is pretty simple, with 2 main rows split in two columns. I need to make it so the two main "cells" (marked "Main 1" and "Main 2" in the code below) expand vertically to use as much vertical space as possible.
My understanding is this can be achieved using a <v-container fluid fill-height>
. But while the horizontal part works perfectly well, I can't get this layout to expand vertically.
Here is my App.vue
file (simplified for the purpose of this post):
<template>
<v-app>
<v-main>
<v-container fluid fill-height>
<v-row>
<v-col cols="6" class="yellow">Header 1</v-col>
<v-col cols="6" class="yellow">Header 2</v-col>
</v-row>
<v-row>
<v-col cols="8" class="pink">
<v-row>
<v-col cols="5" class="red">Main 1</v-col>
<v-col cols="7" class="red">Main 2</v-col>
</v-row>
<v-row>
<v-col cols="12" class="red">Bottom</v-col>
</v-row>
</v-col>
<v-col cols="4" class="pink">Right</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<style scoped>
.yellow { border: 1px dotted yellow }
.red { border: 1px dotted red }
.pink { border: 1px dotted pink }
</style>
<script setup>
</script>
英文:
I inherited a project where I need the layout to use as much viewport space as possible both horizontally and vertically, and resize nicely too.
My layout is pretty simple, with 2 main rows split in two columns. I need to make it so the two main "cells" (marked "Main 1" and "Main 2" in the code below) expand vertically to use as much vertical space as possible.
My understanding is this can be achieved using a <v-container fluid fill-height>
. But while the horizontal part works perfectly well, I can't get this layout to expand vertically.
Here is my App.vue
file (simplified for the purpose of this post):
<template>
<v-app>
<v-main>
<v-container fluid fill-height>
<v-row>
<v-col cols="6" class="yellow">Header 1</v-col>
<v-col cols="6" class="yellow">Header 2</v-col>
</v-row>
<v-row>
<v-col cols="8" class="pink">
<v-row>
<v-col cols="5" class="red">Main 1</v-col>
<v-col cols="7" class="red">Main 2</v-col>
</v-row>
<v-row>
<v-col cols="12" class="red">Bottom</v-col>
</v-row>
</v-col>
<v-col cols="4" class="pink">Right</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<style scoped>
.yellow { border: 1px dotted yellow }
.red { border: 1px dotted red }
.pink { border: 1px dotted pink }
</style>
<script setup>
</script>
I also did set up a Vuetify playground for live testing.
答案1
得分: 2
好的,以下是翻译好的部分:
OK,希望这是您正在寻找的。请注意,我在容器和一些行上使用了Vuetify的flex实用类。这些类可帮助您使用flexbox布局页面。您可以在此处了解更多信息。
<template>
<v-app>
<v-main class='d-flex'>
<v-container fluid fill-height class='d-flex flex-column'>
<v-row class='flex-grow-0'>
<v-col cols="6" class="yellow">Header 1</v-col>
<v-col cols="6" class="yellow">Header 2</v-col>
</v-row>
<v-row>
<v-col cols="8" class="pink d-flex flex-column">
<v-row>
<v-col cols="5" class="red">Main 1</v-col>
<v-col cols="7" class="red">Main 2</v-col>
</v-row>
<v-row class='flex-grow-0'>
<v-col cols="12" class="red">Bottom</v-col>
</v-row>
</v-col>
<v-col cols="4" class="pink">Right</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
英文:
OK, I hope this is what you were looking for. Notice how I made use of Vuetify's flex utility classes on the container and some of the rows. These classes are there to help you layout your page with flexbox. You can read more about it here.
<template>
<v-app>
<v-main class='d-flex'>
<v-container fluid fill-height class='d-flex flex-column'>
<v-row class='flex-grow-0'>
<v-col cols="6" class="yellow">Header 1</v-col>
<v-col cols="6" class="yellow">Header 2</v-col>
</v-row>
<v-row>
<v-col cols="8" class="pink d-flex flex-column">
<v-row>
<v-col cols="5" class="red">Main 1</v-col>
<v-col cols="7" class="red">Main 2</v-col>
</v-row>
<v-row class='flex-grow-0'>
<v-col cols="12" class="red">Bottom</v-col>
</v-row>
</v-col>
<v-col cols="4" class="pink">Right</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论