在Vuetify v2.3中，如何使v容器用完所有可用高度而没有滚动条？

编程问答 2022-06-07

问题描述

似乎有一个名为“ fill-height”的属性，但是在API（v2.3）中并未提及，尽管它确实可以正常工作，但是我无法准确地获得它是的。

我的目标是要有一个全宽度的标题，然后是一个带有两列的v容器（取决于页面的cols大小会有所不同。）我意识到我可以通过flexbox做到这一点，只有我认为在这种特殊情况下，您应该（？）喜欢使用网格。

我能够使v容器用完所有的高度，但是当我添加页眉时，它会将内容推下并在v页脚下“滑动”。

如果其中一列中的实际内容足够大，需要滚动条，则可以，但是如果不是这种情况，则应将其填满屏幕，如下面的“目标”所示。

App.vue：

<template>
    <v-app>
        <Navbar/>
        <v-main>
            <router-view></router-view>
        </v-main>
        <Footer v-if="$vuetify.breakpoint.name != 'xs'"/>
    </v-app>
</template>

enter image description here

Layout.vue：

尝试＃1（标题，后跟带有填充高度的v容器）：

<template>
    <div style="height:100%;">
        <br><br><br>
        <h1>Header</h1>
        <v-container
            class="fill-height"
            fluid
            style="background-color:#f00;"
        >
            <v-row
                class="fill-height"
            >
                <v-col
                    cols="6"
                    style="background-color:#600;"
                >
                    Left
                </v-col>
                <v-col
                    cols="6"
                >
                    Right
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>

尝试＃2（标题为v行，后跟另一个v行，其高度为fill-height）：

<template>
    <div style="height:100%;">
        <v-container
            class="fill-height"
            fluid
            style="background-color:#f00;"
        >
            <v-row>
                <v-col cols="12">
                    <br><br><br>
                    <h1>Header</h1>
                </v-col>
            </v-row>

            <v-row
                class="fill-height"
            >
                <v-col
                    cols="6"
                    style="background-color:#600;"
                >
                    Left
                </v-col>
                <v-col
                    cols="6"
                >
                    Right
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>

这两种方法都会导致文档长度超过100％，并出现滚动条。

注释＃1。如果可能的话，我宁愿在<div>之后保留换行<template>，因为我的模板中需要包含多个元素（此处未显示）。

注释＃2。 100vh在这种情况下不起作用，因为它是一个嵌套元素。

相关（但未回答）

：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

grid-layouthtmlvuetify.js