时间戳

首页 > 解决方案 > Vuetify 网格列环绕填充全高

css - Vuetify 网格列环绕填充全高

问题描述

在网格系统中使用 v-card 创建组件后，id 未填充到完整高度。我使用了 d-flex，但它没有按预期工作。

带有白色 v-card 的中间列应该填满整个列的高度，但它会堆叠在顶部。这是所需功能的图片： 在此处输入图像描述

这是代码，在Codepen中您可以看到它没有延伸到整个列高，而是嵌套在顶部。

var car = Vue.component('car', {

  template: `
    <div class="car">
         <v-flex d-flex child-flex>
        <v-card >
            <v-card-text>
                <div class="text-center font-weight-black title text--primary">
                    test
                </div>
                <div class="text-center">
                    data
                </div>
            </v-card-text>
        </v-card>
        </v-flex>
    </div>
  `
})

new Vue({
  el: '#app',
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
  }),
  components: {"car":car}
})
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap>

        <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="orange lighten-2" tile flat>
            <v-card-text>Card 1</v-card-text>
          </v-card>
        </v-flex>
        
        <v-flex d-flex xs12 sm2>

          <v-layout column wrap>
            <car></car>
            <car></car>
            <car></car>
          </v-layout>
        </v-flex>

        <v-flex d-flex xs12 sm6>
          <v-card color="red lighten-2" dark tile flat>
            <v-card-text>{{ lorem }} {{ lorem }} {{ lorem }} {{ lorem }} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
   
         <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="purple lighten-1" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 sm2 child-flex>
          <v-card color="green lighten-2" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        
        <v-flex d-flex xs12 sm6 child-flex>
          <v-card color="blue lighten-2" tile flat>
            <v-card-text>{{lorem}} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
       
      </v-layout>
    </v-container>
  </v-app>
</div>

标签： cssvue.jsvuetify.js

解决方案

您可以添加grow到汽车外部 div 和fill-heightv-flex...

<div class="car grow">
    <v-flex d-flex child-flex class="fill-height">
      <v-card>
        <v-card-text>
            <div class="text-center font-weight-black title text--primary">
                test
            </div>
            <div class="text-center">
                data
            </div>
        </v-card-text>
      </v-card>
    </v-flex>
</div>

https://codeply.com/p/qOKz9Qsv6L

推荐阅读