如何在 Vuetify 2.0.5 中设置 v-sheet/v-container 大小以匹配屏幕与 v-app-bar？

Question

我正在尝试在我的 nuxt 网站上使用“带有滚动缩小和图像的突出”v-app-bar。

Vuetify 的代码是：

  <v-card class="overflow-hidden">
    <v-app-bar
      absolute
      color="#fcb69f"
      dark
      shrink-on-scroll
      src="https://picsum.photos/1920/1080?random"
      scroll-target="#scrolling-techniques-2"
    >
      [...]
    </v-app-bar>
    <v-sheet
      id="scrolling-techniques-2"
      class="overflow-y-auto"
      max-height="600"
    >
      <v-container style="height: 1000px;">
        <nuxt />
      </v-container>
    </v-sheet>
  </v-card>

如果我理解正确，那么页面的内容必须在 v-container 中，在那里我有我的 nuxt 根元素。到目前为止效果很好。v-sheet 或 v-container 不会填满整个页面。如果我尝试将其设置为 100%/100vh 以填充小型智能手机屏幕以及大型 PC 显示器上的空间，则应用栏不再可滚动，或者整个页面不再可滚动，或者内容在 v-container 中远远低于屏幕边缘，即使您一直向下滚动。

我希望我只是忽略了一件愚蠢的小事。如果没有，那么我可能不得不使用 Vuetify 的普通“工具栏”，即使应用栏更好。

此致，

雅各布

Answer 1

您可以删除<v-sheet>和<v-container>。

主要是您需要将窗口作为滚动目标。要实现这一点，您需要scroll-target="#scrolling-techniques-2"从您的文件中删除v-app-bar并替换absolute为fixed.

我的应用栏看起来像这样：

<v-app-bar
  fixed
  color="#fcb69f"
  dark
  shrink-on-scroll
  src="https://picsum.photos/1920/1080?random"
>