vuetify.js - 如何在 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"
>