如何让我的 v 容器填充所有可用高度？

Question

所以我在我的 vue.js 应用程序中使用 vuetify 2.0，我试图让我的 v-container 在我的Main.vue中使用填充高度和流体获取所有可用的高度，但它似乎不起作用全部。

我目前拥有的是这样的：

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

应用程序

<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>

主程序

<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>在父级和子级之间插入 a 时，它们将停止工作。要了解有关 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>
  <div v-if="connected">
    <Main />
  </div>
  <div v-else>
    <Login />
  </div>
</v-app>

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

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

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

注意事项：因为<template>实际上并不产生 DOM 元素，所以当你使用它时v-for，你将不得不使用它的子元素:key而不是<template>，但除了这种边缘情况，这是一个很好的方式来耦合布局组件而无需将它们包装起来进入一个 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>