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

Question

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

我目前拥有的是这样的：

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

应用程序.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>

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

原文由 Pandorque 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

fill-height 通常，所有与 flexbox 相关的属性都严格依赖于父子关系。

因此，当您在父母和孩子之间插入 <div> 时，他们停止工作。要了解更多关于 flexbox 的工作原理，我推荐 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> ，但除了这种边缘情况，这是耦合布局组件而不将它们包装到 DOM 元素中的好方法。

It’s also useful when you’re dealing with strict parent/child HTML relations (ie: <table> + <tr> + <td> , <ul> + <li> , <ol> + <li> 等…）。

原文由 tao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这对我有用：

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

原文由 Andrew Zagarichuk 发布，翻译遵循 CC BY-SA 4.0 许可协议