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

Posted 2023-02-22

【中文标题】如何让我的 v-container 填充所有可用高度？

【英文标题】：How can I make my v-container fill all height available?

【发布时间】：2020-05-07 12:08:24

【问题描述】：

所以我在我的 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

【参考方案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：

只需将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>，但除了这个边缘-case，这是一种无需将布局组件包装到 DOM 元素中即可耦合布局组件的好方法。 当您处理严格的父/子 html 关系时，它也很有用（即：<table> + <tr> + <td>、<ul> + <li>、<ol> + <li> 等... )。

【讨论】：

这是我读过的最有帮助的答案之一，谢谢。

【参考方案2】：

这对我有用：

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

【参考方案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>

【讨论】：

我已经尝试过这个但它不起作用（它在我共享的代码中），关于第二个解决方案，我正在尝试使用新的 vuetify 网格系统vuetifyjs.com/en/components/grids#grid-system所以我避免使用 v-layout 和 v-fly 组件

感谢您的帮助，但我刚刚尝试过，它仍然无法正常工作:(

可能是因为你的 v-app 中有一个 div 标签，删除它并保持这样的布局。 github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/…

我不知道如何删除它，因为我的整个应用程序中只能有一个 v-app（因为它只能在应用程序中使用一次）。我在我的 App.vue 中需要它，因此我不能在我的 Main.vue 中使用它。我尝试将所有内容放在一个文件中并删除 div，它可以工作并解决问题，但我应该有我的代码分离，我不知道该怎么办

我的意思是去掉你 v-app 里面的 div，基本上模式应该是 v-app > v-content > v-container 来实现你的目标