title: Vuetify Mobile Fill Entire Screen in Portrait
body: <p>When I test my app in mobile portrait mode it looks like this:</p>
  <p><a href="https://nimb.ws/7HlnjB" rel="nofollow noreferrer">Mobile portrait</a></p>
  <p>But I'm trying to make it look like this from <a href="https://nimb.ws/QbXr9l" rel="nofollow noreferrer">Vuetify</a></p>
  <p>In landscape its fantastic, portrait no luck. I'm using <code>fluid</code> and <code>fill-height</code> on the <code>v-container</code> but no luck.</p>
  <p>I've also tried <code>height=&quot;100vh&quot;</code> on the container but that also didn't work.</p>
  <p>This is some sample code that's been simplified and it doesn't work either:</p>
  <pre><code>&lt;template&gt;
    &lt;v-container fluid fill-height&gt;
      &lt;v-layout&gt;
        &lt;v-row align=&quot;center&quot; justify=&quot;center&quot; class=&quot;mx-auto&quot;&gt;
          &lt;v-col cols=&quot;8&quot;&gt;
            &lt;v-card 
              outlined
              class=&quot;d-flex&quot;
            &gt;
              &lt;v-text-field
                color=&quot;#F03C99&quot;
                label=&quot;Email&quot;
                placeholder=&quot;Email for Your Showroom&quot;
                outlined 
                class=&quot;ml-4&quot;
              &gt;&lt;/v-text-field&gt;
            &lt;/v-card&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
      &lt;/v-layout&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  </code></pre>
  <p>I'm starting to think that it might be that I'm using <code>router-view</code> this is what I have in my router</p>
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;router-view name=&quot;navigation&quot; :key=&quot;$route.fullPath&quot;&gt;&lt;/router-view&gt;
      &lt;router-view class=&quot;fill-height&quot; key=&quot;main&quot;&gt;&lt;/router-view&gt;
      &lt;router-view name=&quot;confirm&quot;&gt;&lt;/router-view&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Here is my real code:</p>
  <pre><code>&lt;template&gt;
    &lt;v-container fluid fill-height&gt;
      &lt;v-layout&gt;
        &lt;v-row align=&quot;center&quot; justify=&quot;center&quot; class=&quot;mx-auto&quot;&gt;
          &lt;v-col :cols=&quot;overallColumns&quot;&gt;
            &lt;v-card 
              outlined
            &gt;
              &lt;v-row&gt;
                &lt;v-col
                  :cols=&quot;accountForImage&quot;
                  align=&quot;start&quot;
                &gt;
                  &lt;v-card-title&gt;
                    &lt;v-img src='small-bella-logo.png' max-height=&quot;41px&quot; max-width=&quot;128px&quot; contain&gt;&lt;/v-img&gt;
                  &lt;/v-card-title&gt;
                  &lt;v-form&gt;
                    &lt;v-text-field
                      v-model=&quot;email&quot;
                      color=&quot;#F03C99&quot;
                      label=&quot;Email&quot;
                      :rules=&quot;[rules.email]&quot;
                      placeholder=&quot;Email for Your Showroom&quot;
                      outlined 
                      class=&quot;ml-4&quot;
                      :class=&quot;marginRight&quot;
                      :error-messages=&quot;errorMessage&quot;
                      data-cy=&quot;login&quot;
                    &gt;&lt;/v-text-field&gt;
  
                    &lt;v-text-field
                      v-model=&quot;password&quot;
                      color=&quot;#F03C99&quot;
                      label=&quot;Password&quot;
                      placeholder=&quot;Enter your password&quot;
                      outlined 
                      class=&quot;ml-4&quot;
                      :class=&quot;marginRight&quot;
                      :append-icon=&quot;passwordVisible ? 'visibility' : 'visibility_off'&quot;
                      :type=&quot;passwordVisible ? 'text' : 'password'&quot;
                      @click:append=&quot;passwordVisible = !passwordVisible&quot;
                      data-cy=&quot;password&quot;
                    &gt;&lt;/v-text-field&gt;
  
  
                    &lt;v-row 
                      class=&quot;mt-n5&quot;
                    &gt;
                      &lt;v-col 
                        :cols=&quot;stackColumns&quot;
                        align=&quot;start&quot;&gt;
                        &lt;v-btn 
                          color=&quot;#AF3482&quot; 
                          class=&quot;white--text ml-4&quot;
                          data-cy=&quot;login-button&quot; 
                          @click=&quot;logInWithBella&quot;
                        &gt;LOGIN&lt;/v-btn&gt;
                      &lt;/v-col&gt;
  
                      &lt;v-col 
                        :cols=&quot;stackColumns&quot;
                        :align=&quot;alignStackedColumnToEnd&quot;
                        class=&quot;mt-2&quot;
                        :class=&quot;marginLeftWhenStacked&quot;
                        &gt;
                        &lt;h1
                          @click=&quot;forgotPassword&quot;
                          class=&quot;caption font-weight-bold ml-4 pointer pink_text&quot;
                        &gt;FORGOT PASSWORD?&lt;/h1&gt;
                      &lt;/v-col&gt;
                    &lt;/v-row&gt;
  
                    &lt;v-row align=&quot;center&quot; justify=&quot;center&quot;&gt;
                      &lt;v-col cols=&quot;12&quot; align=&quot;center&quot; justify=&quot;center&quot;&gt;
                        &lt;v-divider class=&quot;ml-4&quot;&gt;&lt;/v-divider&gt;
                      &lt;/v-col&gt;
                    &lt;/v-row&gt;
  
                    &lt;v-row 
                      justify=&quot;space-between&quot;
                    &gt;
                      &lt;v-col
                        :cols=&quot;columnsFiveAndTwelve&quot;
                        :align=&quot;alignStackedColumnToCenter&quot;
                        justify=&quot;start&quot;&gt;
                        &lt;v-btn
                          class=&quot;ml-4 white--text&quot;
                          color=&quot;#3B5998&quot;
                          @click=&quot;logInWithFacebook()&quot;
                          medium&gt;
                          LOGIN WITH FACEBOOK
                        &lt;/v-btn&gt;
                      &lt;/v-col&gt;
  
                      &lt;v-col
                        :cols=&quot;columnsFiveAndTwelve&quot;
                        :align=&quot;alignStackedColumnToCenter&quot;
                        justify=&quot;end&quot;&gt;
                        &lt;v-btn
                          class=&quot;white--text&quot;
                          :class=&quot;marginLeftAndNegativeLeft&quot;
                          color=&quot;#DB4437&quot;
                          @click=&quot;logInWithGoogle()&quot;
                          medium
                          &gt;
                          LOGIN WITH GOOGLE
                        &lt;/v-btn&gt;
                      &lt;/v-col&gt;
                    &lt;/v-row&gt;
  
                    &lt;v-row align=&quot;center&quot; justify=&quot;center&quot;&gt;
                      &lt;v-col cols=&quot;12&quot; align=&quot;center&quot; justify=&quot;center&quot;&gt;
                        &lt;v-divider class=&quot;ml-4&quot;&gt;&lt;/v-divider&gt;
                      &lt;/v-col&gt;
                    &lt;/v-row&gt;
  
                    &lt;v-row align=&quot;start&quot; justify=&quot;center&quot;&gt;
                      &lt;v-col cols=&quot;12&quot; align=&quot;start&quot; justify=&quot;center&quot;&gt;
                        &lt;h1 class=&quot; ml-4 font title font-weight-regular&quot;&gt;
                          No Account?
                        &lt;/h1&gt;
                        &lt;v-btn
                          class=&quot;ml-4 white--text mt-2&quot;
                          :class=&quot;marginBottom&quot;
                          color=&quot;#AF3482&quot;
                          block
                          @click=&quot;sendAndCreateToken&quot;
                          &gt;
                          SIGN UP AND CREATE SHOWROOM
                        &lt;/v-btn&gt;
                      &lt;/v-col&gt;
                    &lt;/v-row&gt;
                  &lt;/v-form&gt;
                &lt;/v-col&gt;
  
                &lt;v-col 
                  cols=&quot;6&quot; 
                  align=&quot;center&quot; 
                  class=&quot;&quot;
                  v-if=&quot;removeImage&quot;
                &gt;
                  &lt;v-img src=&quot;login.png&quot; class=&quot;mt-10&quot; max-height=&quot;519px&quot; max-width=&quot;187px&quot; contain&gt;&lt;/v-img&gt;
                &lt;/v-col&gt;
              &lt;/v-row&gt;
            &lt;/v-card&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
        &lt;p&gt;{{ $vuetify.breakpoint.name }}&lt;/p&gt;   
      &lt;/v-layout&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  </code></pre>