时间戳

首页 > 解决方案 > Vuetify Flex Layout - 没有填充高度

vue.js - Vuetify Flex Layout - 没有填充高度

问题描述

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

<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.jsflexboxvuetify.js

解决方案

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

<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

推荐阅读