Vuetify: fill-height to v-layout and center-center content?

[NadhirBoukhenifra]

Steps to reproduce

i made this simple page with vutifyjs:

  <v-app id="app" standalone toolbar footer fill-height v-cloak light>
   <v-toolbar fixed class="light-blue" dark>
        <v-toolbar-title>SiteTitle</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon><v-icon>translate</v-icon></v-btn>
        <v-btn flat>Register</v-btn>
        <v-btn class="light-green">Login</v-btn>
    </v-toolbar>

      <main>
        <v-container class="text-xs-center" >
          <v-layout row child-flex justify-center align-center wrap>
            <v-flex fill-height>
              <v-btn outline dark large class="orange orange--text">
                Login Now!
                <v-icon right dark class="orange--text">arrow_forward</v-icon>
              </v-btn>

            </v-flex>

          </v-layout>

        </v-container>
      </main>

      <v-footer class="light-grey ">
        <span class="grey--text">Copyright © 2017 SiteTitle, #NadhirBoukhenifra. – All Rights Reserved.</span>
      </v-footer>
    </v-app>

and the Result:

the content not aligned to center-center of the page !!!!???
i think that must the v-layout be full-height or something like that??

and i have add this css style to the code like this:
css code:

.redBorder{
  border:1px solid red !important;
}
.greenBorder{
  border:1px solid green !important;
}
.blackBorder{
  border:1px solid black !important;
}
.minHeightExample{
  min-height:600px;
}

and the code after:

  <v-app id="app" standalone toolbar footer fill-height v-cloak light>
   <v-toolbar fixed class="light-blue" dark>
        <v-toolbar-title>SiteTitle</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon><v-icon>translate</v-icon></v-btn>
        <v-btn flat>Register</v-btn>
        <v-btn class="light-green">Login</v-btn>
    </v-toolbar>

      <main>
        <v-container class="text-xs-center greenBorder" >
          <v-layout class="blackBorder minHeightExample" row child-flex justify-center align-center wrap>
            <v-flex class="redBorder" fill-height>
              <v-btn outline dark large class="orange orange--text">
                Login Now!
                <v-icon right dark class="orange--text">arrow_forward</v-icon>
              </v-btn>

            </v-flex>

          </v-layout>

        </v-container>
      </main>

      <v-footer class="light-grey ">
        <span class="grey--text">Copyright © 2017 SiteTitle, #NadhirBoukhenifra. – All Rights Reserved.</span>
      </v-footer>
    </v-app>

and the result after:

so its get center-center but the v-layout black borderNOT get full-height.
i can't find the API that can handle this??
Any idea?

Versions

Vue: v2.4.0
Vuetify: v0.14

What is expected ?

content get center-center of tha page

What is actually happening ?

the v-layout must be full-height? or something like that?

Reproduction Link

[johnleider]

When creating an issue you should be provided with boilerplate for the ticket. This is important for myself and others to properly address your issue. Please reopen this with the required information, thank you.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord