如何让Vuetify布局占满全部可用垂直空间？

要实现垂直方向占满视口且Main 1、Main 2扩展到可用空间，需调整布局的flex属性层级，具体修改如下：

1. 给<v-main>添加fill-height，确保主内容区域占满视口高度
2. 外层第二行（包含粉色列的<v-row>）添加flex-grow-1，让它占据header行之外的所有垂直空间
3. 粉色列（cols="8"）添加d-flex flex-column，使其内部row垂直排列
4. Main 1/2所在的内层<v-row>添加flex-grow-1，占满粉色列的剩余垂直空间
5. 给Main 1、Main 2的<v-col>添加h-100，确保单元格高度撑满所在row

修改后的完整代码：

<template>
    <v-app>
        <v-main fill-height>
            <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 flex-grow-1>
                    <v-col cols="8" class="pink d-flex flex-column">
                        <v-row flex-grow-1>
                            <v-col cols="5" class="red h-100">Main 1</v-col>
                            <v-col cols="7" class="red h-100">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 h-100">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>

关键逻辑说明 #

• fill-height：让元素继承父级高度并撑满视口，需从<v-main>开始逐层确保高度传递
• flex-grow-1：在flex容器中，让元素占据剩余的可用空间，实现垂直方向自动扩展
• d-flex flex-column：将容器的flex方向改为垂直，让内部元素按垂直方向分配空间
• h-100：设置元素高度为100%，确保子元素撑满父容器的高度

内容的提问来源于stack exchange，提问作者Nicolas