css - 如何将绝对 v-overlay 的子 v-card 设置为 100% 的高度和宽度？

Question

我有一个 v-dialog，它有一个帮助图标，单击该图标时会在 v-dialog（父 v-card）框上放置一个 v-overlay 以提供帮助文本。为了将叠加层仅定位在 v-dialog 而不是整个应用程序上，我设置了 absolute 属性。

<v-dialog v-model="dialog" max-width="500px">
    <v-card>
        <v-overlay absolute :value="olyHelp" opacity="1">
            <v-card @click="olyHelp=false" width="100%" height="100%">
                <p>XXXX</p>
            </v-card>
        </v-overlay>

        <v-card-title class="d-flex justify-space-between">
            <v-btn class="align-baseline" icon small @click="olyHelp=true"><v-icon small>mdi-help</v-icon></v-btn>
        </v-card-title>

        <v-card-text>
           Regular dialog stuff
        </v-card-text>
   </v-card>
</v-dialog>

覆盖层内的 v-card 在覆盖层内居中，宽度和高度被忽略。我尝试在其上设置所有不同的 css 位置，但我似乎无法让它填满整个覆盖/对话框（父 v 卡）空间。

例子：

我需要让 v-card 填满父 v-card/v-overlay 的全部宽度和高度

标签： cssvuetify.js

Answer 1

我遇到了同样的问题，最终通过修改 css 来修复它。

<template>
  <v-overlay class="my-overlay">
    <v-card width="100%" height="100%">
      My content
    </v-card>
  </v-overlay>
</template>
<style scoped>
  .my-overlay >>> .v-overlay__content {
    width: 100%;
    height: 100%;
  }
</style>