首页 文章

Vuetify全屏旋转木马

提问于
浏览 次
2

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

我在页面顶部有一个工具栏，它似乎会干扰并导致这些工具无法正常工作 .

我试过了：

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

<v-carousel fullscreen hide-controls>

<v-carousel fill-height hide-controls>

但是所有这些都使得整个事物消失或使旋转木马坚持似乎是默认的最大高度 .

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

我怎么能得到一个全屏旋转木马？

css vue.js vuetify.js

1 回答

  • 4

    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

    回复于

相关问题