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

【问题标题】：How to set v-sheet/v-container size to match screen with v-app-bar in Vuetify 2.0.5?如何在 Vuetify 2.0.5 中设置 v-sheet/v-container 大小以匹配屏幕与 v-app-bar？
【发布时间】：2019-12-21 03:44:07
【问题描述】：

我正在尝试在我的 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 的普通“工具栏”，即使应用栏更好。

最好的问候，

雅各布

【问题讨论】：

你试过去掉 v-card 元素吗？很确定他们只在示例中这样做是为了提供某种背景
@CathyHa 是的，而且我不能再滚动了......
有解决办法吗？

标签： vuetify.js nuxt.js

【解决方案1】：

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

主要是你需要将目标窗口作为滚动目标。为此，您需要从您的v-app-bar 中删除scroll-target="#scrolling-techniques-2"，并将absolute 替换为fixed。

我的应用栏是这样的：

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

【讨论】：