Fit div inside page without scrolling

Question

I have created layout with flexbox and vuetify, where card contains header and footer, and scrollable content between them.

Here is current code in codepen:

https://codepen.io/peter-peter-the-typescripter/pen/poyZmEm?editors=1010

I need fit card (including paddings of container) in height to remove scrollbar of main page. Can you tell me how to edit code to ensure that? Thank you.

code:

<div id="app">
  <v-app id="inspire">
    <v-container fluid style="height: 100%;">
      <v-row style="height: 100%">
        <v-col>
          <v-card>
            <v-row no-gutters style="height: 100%">
              <v-col class="no-gutters red" style="height: 100%; max-height: 100vh; flex-direction: column; display: flex;" cols="4">
                <!-- header -->
                <div style="flex-shrink: 0">
                  <v-toolbar>
                    <v-toolbar-title>
                      Toolbar Left
                    </v-toolbar-title>
                  </v-toolbar>
                </div>
                <!-- Scrollable area -->
                <div style="flex: 1; overflow-y: auto;">
                  <v-list>
                    <template v-for="item in 30">
                      <v-list-item :key="item">
                        <v-list-item-content>
                          <v-list-item-title v-html="'title ' + item"></v-list-item-title>
                        </v-list-item-content>
                      </v-list-item>
                    </template>
                  </v-list>
                </div>
                <!-- footer -->
                <div style="flex-shrink: 0">
                  <v-btn>Click me</v-btn>
                </div>
              </v-col>
            </v-row>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Blackraspberryyy Blackraspberryyy · Accepted Answer · 2020-09-19T06:45:35

You need to get the container's vertical paddings, and minus them to your max-height: 100vh on your <v-col/>. If the container's has a padding of 12px both at the top and at the bottom, your max-height should be max-height: calc(100vh - 24px).

<v-col
  ...
  style="max-height: calc(100vh - 24px);"
>
...
</v-col>

On an additional note and not really related to my answer, you can use Vuetify's flex utility classes so you don't need to have inline flex styles.

Here's a demo. I cleaned it up a bit and removed extra styles and elements.

Fit div inside page without scrolling

2 Answers