title: How can I make my v-container fill all height available?
body: <p>So I'm using vuetify 2.0 within my vue.js app and I'm trying to make my v-container in my <strong>Main.vue</strong> to take all the height available using fill-height and fluid but it doesn't seem to work at all.</p>
  
  <p><strong>What I currently have is looking like this :</strong> </p>
  
  <p><strong>Screenshot</strong>: <a href="https://imgur.com/K1yOhWu" rel="noreferrer">https://imgur.com/K1yOhWu</a></p>
  
  <blockquote>
    <p><strong>App.vue</strong></p>
  </blockquote>
  
  <pre><code>&lt;template&gt;
      &lt;v-app&gt;
          &lt;div v-if="connected"&gt;
              &lt;Main /&gt;
          &lt;/div&gt;
          &lt;div v-else&gt;
              &lt;Login /&gt;
          &lt;/div&gt;
      &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Main from '@/views/Main'
  import Login from '@/views/Login'
  
    export default {
      components: {
        Main,
        Login
      },
      data: () =&gt; ({
        connected: true
      })
  
    }
  &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>Main.vue</strong></p>
  </blockquote>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;v-navigation-drawer app clipped dark&gt;
              &lt;v-list&gt;
                  &lt;v-list-item link&gt;
                      &lt;v-list-item-action&gt;
                          &lt;v-icon&gt;mdi-view-dashboard&lt;/v-icon&gt;
                      &lt;/v-list-item-action&gt;
                      &lt;v-list-item-content&gt;
                          &lt;v-list-item-title&gt;Profil&lt;/v-list-item-title&gt;
                      &lt;/v-list-item-content&gt;
                  &lt;/v-list-item&gt;
                  &lt;v-list-item link&gt;
                      &lt;v-list-item-action&gt;
                          &lt;v-icon&gt;mdi-settings&lt;/v-icon&gt;
                      &lt;/v-list-item-action&gt;
                      &lt;v-list-item-content&gt;
                          &lt;v-list-item-title&gt;Chat&lt;/v-list-item-title&gt;
                      &lt;/v-list-item-content&gt;
                  &lt;/v-list-item&gt;
              &lt;/v-list&gt;
          &lt;/v-navigation-drawer&gt;
  
          &lt;v-content&gt;
              &lt;v-container class="fill-height"
                           fluid&gt;
                  &lt;v-row class="fill-height chat-area" style="background-color: red"&gt;
                      &lt;v-col&gt;
                          &lt;p&gt;yooo&lt;/p&gt;
                      &lt;/v-col&gt;
                  &lt;/v-row&gt;
  
                  &lt;v-row class="text-field-area" style="background-color: green"&gt;
                      &lt;v-col&gt;
                          &lt;v-text-field outlined
                                        rounded
                                        label="Type your message"
                                        hide-details
                                        append-icon="mdi-send"
                                        @click :append="logger()"&gt;&lt;/v-text-field&gt;
                      &lt;/v-col&gt;
                  &lt;/v-row&gt;
              &lt;/v-container&gt;
          &lt;/v-content&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data: () =&gt; ({}),
          methods: {
              logger() {
                  //eslint-disable-next-line
                  console.log("Yes tu as cliqué")
              }
          }
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
      .text-field-area {
          position: relative;
          bottom: 0;
          top: 85%;
          width: 100%;
          align-items: center;
      }
  
      .chat-area {
          position: relative;
          top: 0;
          bottom: 15%;
          width: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>What I want to achieve is something like this:</strong></p>
  
  <p><strong>Screenshot</strong>: <a href="https://imgur.com/tovWwaG" rel="noreferrer">https://imgur.com/tovWwaG</a> </p>