Vuetify Flex Layout - 没有填充高度答案

【问题标题】：Vuetify Flex Layout - is not filling the heightVuetify Flex Layout - 没有填充高度
【发布时间】：2020-04-06 12:32:59
【问题描述】：

我已经使用以下代码尝试了许多不同的选项，但是，我无法让它填充剩余的高度。（第二个布局应该填充剩余的高度）我在这里做错了什么？

<template>
  <div class="earnIndex">
    <v-container fluid fill-height>
      <v-layout row wrap>
        <v-flex
          v-for="(offer, index) in offers"
          :key="index"
          xs2
          class="pa-1"
        >
          <SiteButton
            :site-name="offer.siteName"
          />
        </v-flex>
      </v-layout>
      <v-layout column fill-height>
        <v-flex grow>
          <v-card>
            <p>
              test
            </p>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

编辑：

这是我的新代码：

<template>
  <v-layout column wrap>
    <v-flex>
      <v-layout row wrap class="red">
        <v-flex
          v-for="(offer, index) in offers"
          :key="index"
          class="pa-1"
          xs2
        >
          <SiteButton
            :site-name="offer.siteName"
          />
        </v-flex>
      </v-layout>
    </v-flex>
    <v-flex grow align-content-start>
      <v-card height="100%">
        <p>
          test
        </p>
      </v-card>
    </v-flex>
  </v-layout>
</template>

这将创建以下内容：

我希望带有“测试”的卡片在顶部的链接之后直接开始，然后填充其余的高度。

非常感谢您的帮助！

问候，乔什

【问题讨论】：

标签： vue.js flexbox vuetify.js

【解决方案1】：

尝试在右侧使用column fill-height，然后在v-flex 上使用grow...

<v-container fluid fill-height>
    <v-layout row wrap>
        <v-flex v-for="(offer, index) in offers" :key="index" xs2 class="pa-1">
            <v-btn>{{ offer.siteName }}</v-btn>
        </v-flex>
    </v-layout>
    <v-layout column fill-height>
        <v-flex grow>
            <v-card class="fill-height">
                <p> test </p>
            </v-card>
        </v-flex>
    </v-layout>
</v-container>

https://codeply.com/p/bwE5ifP4Pe

【讨论】：

谢谢，不过，第一个 v-layout 应该在第二个 v-layout 的顶部 - 这两边都有。
您提供的代码是并排布局。能否提供包含父元素的完整代码？
当然，但这几乎是全部。

【解决方案2】：

您的场景中不需要太多标记，可以将其减少到几行。

我只是在 v-for 中填写了一些数字而不是您的自定义组件。
这将在您的 for 循环之后将较低的卡拉伸到最大数量。 v-row 和 v-col 是现在 2.0 (https://vuetifyjs.com/en/components/grids/) 的方式。

<div class="d-flex fill-height" style="flex-direction:column">
  <v-row class="blue">
    <v-col cols="2" v-for="i in 15" :key="i" class="pa-1">
      <v-btn>{{ i }}</v-btn>
    </v-col>
  </v-row>
  <div class="fill-height" style="background-color: salmon">Down</div>
</div>

Codesandbox example

【讨论】：