如何让我的 v-container 填充所有可用高度？

Question

所以我在我的 vue.js 应用程序中使用 vuetify 2.0，我试图在我的 Main.vue 中制作我的 v-container 以使用 fill-height 和流体，但它似乎根本不起作用。

我目前拥有的是这样的：

截图：https://imgur.com/K1yOhWu

App.vue

<template>
    <v-app>
        <div v-if="connected">
            <Main />
        </div>
        <div v-else>
            <Login />
        </div>
    </v-app>
</template>

<script>
import Main from '@/views/Main'
import Login from '@/views/Login'

  export default {
    components: {
      Main,
      Login
    },
    data: () => ({
      connected: true
    })

  }
</script>

Main.vue

<template>
    <div>
        <v-navigation-drawer app clipped dark>
            <v-list>
                <v-list-item link>
                    <v-list-item-action>
                        <v-icon>mdi-view-dashboard</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>Profil</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link>
                    <v-list-item-action>
                        <v-icon>mdi-settings</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>Chat</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-content>
            <v-container class="fill-height"
                         fluid>
                <v-row class="fill-height chat-area" style="background-color: red">
                    <v-col>
                        <p>yooo</p>
                    </v-col>
                </v-row>

                <v-row class="text-field-area" style="background-color: green">
                    <v-col>
                        <v-text-field outlined
                                      rounded
                                      label="Type your message"
                                      hide-details
                                      append-icon="mdi-send"
                                      @click :append="logger()"></v-text-field>
                    </v-col>
                </v-row>
            </v-container>
        </v-content>
    </div>
</template>

<script>
    export default {
        data: () => ({}),
        methods: {
            logger() {
                //eslint-disable-next-line
                console.log("Yes tu as cliqué")
            }
        }
    }
</script>

<style scoped>
    .text-field-area {
        position: relative;
        bottom: 0;
        top: 85%;
        width: 100%;
        align-items: center;
    }

    .chat-area {
        position: relative;
        top: 0;
        bottom: 15%;
        width: 100%;
    }
</style>

我想要实现的是这样的：

截图：https://imgur.com/tovWwaG

Answer 1

fill-height，一般来说，所有与 flexbox 相关的属性都严格依赖于父子关系。

因此，当您在父级和子级之间插入 <div> 时，它们将停止工作。要了解更多关于 flexbox 的工作原理，我推荐A complete guide to flexbox。

简而言之，您的布局：

<v-app>
  <div v-if="connected">
    <Main />
  </div>
  <div v-else>
    <Login />
  </div>
</v-app>

打破父子关系（<v-app> 和 <Main> 之间）。

您可以通过两种方式摆脱多余的<div>s：

1. 只需将v-if 放在内容上即可：

<v-app>
  <Main v-if="connected" />
  <Login v-else />
</v-app>

1. 或使用<template> 标签。因为它们只是逻辑包装器，所以 Vue 不会为它们生成实际的 DOM 元素。当您有多个元素作为内容并且不想在每个元素上放置 v-if 时，这尤其有用：

<v-app>
  <template v-if="connected">
    <Main />
    <SomeOtherComponent />
    <YetOtherComponent />
  </template>
  <Login v-else />
</v-app>

显然，如果您在 v-else 案例中有多个组件，您也可以将其转换为 <template>。

---

注意事项：因为<template> 实际上并不产生 DOM 元素，所以当您将它与 v-for 一起使用时，您必须使用 :key 其子元素而不是 <template>，但除了这个边缘-case，这是一种无需将布局组件包装到 DOM 元素中即可耦合布局组件的好方法。
当您处理严格的父/子 HTML 关系时，它也很有用（即：<table> + <tr> + <td>、<ul> + <li>、<ol> + <li> 等... )。

Answer 2

这对我有用：

  <v-container fluid style="height: 100vh;" >
    <v-layout fill-height>
        ...
    </v-layout>
  </v-container>

Answer 3

只要把fill-height设置为true，像这样

<v-container fill-height> </v-container>

如果不行，放到v-content，试试这个

<v-content>
   <v-container fill-height>
       <v-layout>
            <v-flex xs12>
                    ...
                    ...
            </v-flex>
       </v-layout>
   </v-container>
</v-content>

或者

<v-content>
    <v-container class="fill-height" fluid>
         <v-row justify="center" align="center">
             <v-col class="shrink">
                  ...
                  ...
            </v-col>
         </v-row>
    </v-container>
</v-content>