vue.js 如何使我的v型集装箱装满所有可用高度？

cnwbcb6i 于 2023-02-16 发布在 Vue.js

关注(0)|答案(4)|浏览(107)

因此，我在vue.js应用程序中使用vuetify 2.0，并尝试在Main.vue中使用填充高度和流体使我的v容器占据所有可用高度，但似乎根本不起作用。

我当前拥有的内容如下所示：
截图：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

vue.js

来源：https://stackoverflow.com/questions/59840960/how-can-i-make-my-v-container-fill-all-height-available

4条答案

按热度按时间

ogsagwnx1#

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>：
1.只需将v-if放在内容上：

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

1.或者使用<template>标签。因为它们只是逻辑 Package 器，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>，但除了这种极端情况之外，这是一种耦合布局组件而不将它们 Package 到DOM元素中的好方法。
当您处理严格的父/子HTML关系时，它也很有用（即：一个一个米十四个一个一个x+一个米十五个一个x+一个米十六个一个x，一个一个米十七个一个x+一个米十八个一个x，一个一个米十九个一个x+一个米二十个一个x等等）。

赞(0）回复(0）举报 2023-02-16

ecfsfe2w2#

以下是对我有效的方法：

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

赞(0）回复(0）举报 2023-02-16

ig9co6j13#

只需将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>

赞(0）回复(0）举报 2023-02-16

nbysray54#

你可以将工具栏和v-main封装在一个div中，并将div的最小高度设置为100 vh。

赞(0）回复(0）举报 2023-02-16