css - 如何使我的V型容器充满所有可用高度？

Question

因此，我在vue.js应用程序中使用vuetify 2.0，并且尝试在 Main.vue 中制作我的v容器，以使用fill-height和fluid来获取所有可用的高度，但似乎并没有工作。

我目前拥有的是这样的:

截图: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相关的属性都严格依赖于父子关系。
因此，当您在 parent 与 child 之间插入<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>:

只需将v-if放在内容上:

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

或使用<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>编码，但是除了这种边缘情况之外，这是耦合布局组件的好方法而无需将它们包装到DOM元素中。
当您处理严格的父/子HTML关系时(也就是 <table> + <tr> + <td>， <ul> + <li>， <ol> + <li>等)，它也很有用。