Vuetify 轮播不占用全宽高度

Question

我想制作一个占据视口全部宽度和高度的旋转木马。我在 vue.js 2 项目中使用 Vuetify。这是我的代码：

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
      <v-container fill-height>
        <v-carousel
  cycle
  hide-delimiters
  style="height: 100%;">
  <v-carousel-item>
    <v-sheet
    color="red lighten-1"
    fill-height
    style="height: 100%">
      <v-row
          class="fill-height"
          align="center"
          justify="center"
      >
        <div class="text-h2">
          Slide One
        </div>
      </v-row>
    </v-sheet>
  </v-carousel-item>
    <v-carousel-item>
      <v-sheet
          color="warning"
          style="height: 100%">
        <v-row
            class="fill-height"
            align="center"
            justify="center"
        >
          <div class="text-h2">
            Slide Two
          </div>
        </v-row>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>
  </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>

（这是一个将在堆栈溢出中呈现的版本）我这边的结果是这样的：

我正在使用最新版本的 Opera GX 来渲染它，我正在使用 vue serve 来提供它。

Answer 1

通过应用 pa-0 的 class 从 v-container 移除填充（设置 p添加 all 边到 0).
通过将其 fluid 属性设置为 true 从 v-container 中删除边距和 max-width（添加属性足以将其设置为 true).
在 v-carousel 上，删除 style 绑定，因为它已被其 height 属性覆盖。相反，将 v-carousel 的 height 设置为 100%.

<v-container class="pa-0" 1️⃣
             fluid        2️⃣
             fill-height>

  <v-carousel height="100%" 3️⃣ ⋯>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container class="pa-0" fluid fill-height>
          <v-carousel height="100%" cycle hide-delimiters>
            <v-carousel-item>
              <v-sheet color="red lighten-1" fill-height style="height: 100%">
                <v-row class="fill-height" align="center" justify="center">
                  <div class="text-h2">
                    Slide One
                  </div>
                </v-row>
              </v-sheet>
            </v-carousel-item>
            <v-carousel-item>
              <v-sheet color="warning" style="height: 100%">
                <v-row class="fill-height" align="center" justify="center">
                  <div class="text-h2">
                    Slide Two
                  </div>
                </v-row>
              </v-sheet>
            </v-carousel-item>
          </v-carousel>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>

Vuetify 轮播不占用全宽高度

Vuetify carousel not taking up full width-height

html

javascript

css

vue.js

vuetify.js