Css vuetify视差流体模板问题

我正在尝试设置一个流体模板，以便在响应性设计视口中使用。 在中等视口（md）上，显示良好。。。看见 3 v卡（四舍五入）排成一行。。。（视差背景图像高度为380px）

但是，它不能在较小的视口（sm或xs）上正确缩放 由于视差背景图像的高度未调整（仍为380px高度），因此不会显示所有v-CATD

如何正确设置，以便在较小的视口中查看列中的所有v形卡

HTML

    <div id="app">
      <v-app id="inspire">
        <v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="380">
          <v-layout row wrap align-center justify-center>
            <v-flex xs12 sm12 md3>
                <v-card class="elevation-0 rounded-card">
                  <v-card-title primary-title class="layout justify-center">
                    <h1>TITLE 1</h1>
                    </v-card-title>
                  <v-card-text>
                    ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus enim et justo eleifend pharetra. Nam consectetur, nulla in viverra mattis, ipsum libero faucibus odio, at eleifend mauris arcu non nibh. Aliquam congue augue sed sapien tristique, eget faucibus risus pulvinar. Nullam ut nunc felis.
                  </v-card-text>
                </v-card>
             </v-flex>
             <v-flex xs12 sm12 md3 offset-md1>
                <v-card class="elevation-0 rounded-card">
                  <v-card-title primary-title class="layout justify-center">
                    <h1>TITLE 2</h1>
                    </v-card-title>
                  <v-card-text>Proin felis diam, placerat ut lacinia viverra, dapibus ut sapien. Curabitur non dolor sed tortor aliquet lacinia. Maecenas ut porta velit, vel elementum sem. Quisque tincidunt vel nisl quis dignissim. Suspendisse accumsan leo sed neque sodales, in congue metus egestas. Maecenas molestie, eros.
                  </v-card-text>
                </v-card>
             </v-flex>
                     <v-flex xs12 sm12 md3 offset-md1>
                <v-card class="elevation-0 rounded-card">
                  <v-card-title primary-title class="layout justify-center">
                    <h1>TITLE 3</h1>
                    </v-card-title>
                  <v-card-text>
                    Quisque non felis massa. Suspendisse vel aliquam orci, eget aliquet est. In efficitur nisi vel massa volutpat, vitae varius velit volutpat. Duis non maximus nunc, ut tincidunt eros. Aliquam erat volutpat. Vestibulum libero justo, euismod et massa finibus, tincidunt euismod libero.
                  </v-card-text>
                </v-card>
             </v-flex>
          </v-layout>
        </v-parallax>
      </v-app>
    </div>

JS

    .rounded-card {
      border-radius: 50px;
    }
    .card__text {
      font-size: 1.2em;
      padding-top: 0;
      padding-bottom: 3em;
    }

    new Vue({
      el: '#app',

    })

解决

将v视差高度设置为100%

<v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100%">

---

好的，您可以将conditional on

v-layout

设置为专栏，我想

谢谢您的反馈。。。我刚刚找到一个解决方案，将v视差高度设置为100%，将.parallax CSS最小高度设置为380px。。。更新了我的代码笔。我认为你不应该在删除原始的非工作示例时用工作示例（例如答案）编辑问题（或问题中的代码笔），因为未来的读者不会看到问题首先出现在哪里。因此，在我看来，你应该在问题中留下一个不起作用的例子，然后发布一个解决方案作为答案。所以只需分叉代码笔，然后编辑。完成。。。我将代码笔url更新为初始错误状态height=“100%”不起作用，因为height prop只接受数字（not%），在这将忽略您提供的高度，并将高度设置为500px，这是视差的默认高度

.parallax {
   min-height: 380px;
}