[Feature Request] pre-defined layout: scrollable <main>

I would like to be able to add a property to some tag in the pre-defined layout structure to allow only content inside the the

    <main>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </main>

hierarchy to be vertically scrolled.

For instance, in order to achieve the following effect (no full page scroll, I want toolbar and footer always visible), https://imgur.com/GrUKo7E

I need to add custom css:

  html {
    overflow: hidden;
  }

  body {
    overflow: hidden;
  }

  .application {
    height: 100%;
  }

  main {
    height: calc(100% - 56px - 36px);
  }

  .container {
    height: 100%;
    overflow: auto;
  }

I’ve had to repeat this twice already in separate applications when I can see this as being a really common use case.

[dakshshah96]

@johnleider With the release of 2.0, what is the right way of making my content in a router-view surrounded by a fixed layout scrollable?

I’ve always felt that I resort to “hacks” like targeting the html or body tags. Would love to know the correct way to do this if you have the time.

<v-app>
    <v-navigation-drawer app temporary v-model="showNavigation">
        <v-list dense nav class="pt-5">
            <v-list-item v-for="item in items" :key="item.title" link class="mb-3">
                <v-list-item-content>
                    <router-link :to="item.link">
                        <div class="title">{{ item.title }}</div>
                    </router-link>
                </v-list-item-content>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>

    <v-app-bar color="black" dark>
        <v-app-bar-nav-icon @click.stop="showNavigation = !showNavigation"></v-app-bar-nav-icon>
        <v-toolbar-title>{{ currentNav }}</v-toolbar-title>
    </v-app-bar>

    <v-content>
        <router-view></router-view>
    </v-content>
</v-app>

[KaelWD]

This is very easy to do with custom css, but also hard to do in a way that will work at a framework level. I’m going to agree with @sindrepm on this.
Here’s how simple it is: https://codepen.io/anon/pen/bYxpge
Note that menus will not work as expected with this setup due to #795

@tommie - Dialogs do handle scrolling themselves, and you can use the scrollable prop to have fixed header and actions regions.