Vuetify 全屏轮播答案

【问题标题】：Vuetify full-screen carouselVuetify 全屏轮播
【发布时间】：2018-04-04 16:57:48
【问题描述】：

对于我网站的主页，我计划在其上添加一些文字的全屏轮播。我可以制作轮播，但不能全屏（我想要它这样您就不必滚动，无论设备大小如何。我尝试了几件事，但都没有工作。

我在页面顶部有一个工具栏，它似乎会干扰并导致这些工具不起作用。

我试过了：

<v-carousel style="height: 100%" hide-controls>

<v-carousel fullscreen hide-controls>

<v-carousel fill-height hide-controls>

但是所有这些要么使整个事物消失，要么使旋转木马坚持似乎是默认的最大高度。

示例：https://codepen.io/anon/pen/EwqWqP

如何获得全屏轮播？

【问题讨论】：

分享更多代码。
@pirs 我已经更新了问题。

标签： css vue.js vuetify.js

【解决方案1】：

height: 100% 不起作用，因为您的父元素，例如 <body> 或 <some-other-div> 也需要一些高度。

您可以做的是将您的父容器height:100vh 和您的轮播设置为height:100%，例如：

HTML

<div id="app">
  <v-app id="inspire">
    <v-toolbar></v-toolbar>
    <v-carousel style="height:100%">
      <v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i"></v-carousel-item>
    </v-carousel>
  </v-app>
</div>

CSS

#inspire {
  height: 100vh;
}

这似乎对我有用→Example

【讨论】：

这不起作用，因为 vh 似乎忽略了工具栏。我适当地更新了问题。
我不知道你可以在 vuetify 组件上设置样式属性，就像它们是普通的 html 标签一样。感谢您的回答

【解决方案2】：

使用 Vuetify 2.5.8，您可以在 v-carousel 标签中设置 height="100vh"。

 <v-carousel height="100vh">

【讨论】：