Question

对于我网站的主页，我计划在其上放置一个带有一些文字的全屏旋转木马。我可以制作旋转木马，但没有全屏（我想要它，所以你不必滚动，无论设备大小。我已经尝试了几件事，但没有工作。

我在页面顶部有一个工具栏，似乎会干扰并导致这些工具无效。

我试过了：

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

<v-carousel fullscreen hide-controls>

<v-carousel fill-height hide-controls>

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

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

我怎样才能获得全屏旋转木马？

Answer 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

Vuetify全屏旋转木马

1 个答案: