How to set v-sheet/v-container size to match screen with v-app-bar in Vuetify 2.0.5?

Question

I'm trying to use the "Prominent w/ scroll shrink and image" v-app-bar on my nuxt site.

The code from Vuetify is:

  <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>

If I understand this correctly, then the content of the page must be in the v-container, where I have my nuxt root element. That works fine so far. The v-sheet or v-container doesn't fill the whole page. If I try to set it to 100%/100vh to fill the space on small smartphone screens as well as on large PC monitors, then either the app-bar is no longer scrollable, or the whole page is no longer scrollable, or the content in the v-container goes far below the edge of the screen, even though you have scrolled all the way down.

I hope I just overlook one stupid little thing. If not, then I will probably have to use the normal "toolbar" of Vuetify, even if the app bar is so much nicer.

Best Regards,

Jakob

Have you tried getting rid of the v-card element? Pretty sure they only do that in their examples to provide some kind of background — Cathy Ha

Michał T Michał T · Accepted Answer · 2019-10-19T06:14:09

You can remove <v-sheet> and <v-container>.

Mainly you need to target window as scroll-target. To achieve that you need to remove scroll-target="#scrolling-techniques-2" from your v-app-bar and replace absolute with fixed.

My app bar looks like this:

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

How to set v-sheet/v-container size to match screen with v-app-bar in Vuetify 2.0.5?

1 Answers