How to make vuetify stepper full height

Question

How can I make a Vuetify Stepper component fill the entire height of the page? Starting from the example in the doc I have tried several things:

• Adding height="100vh" (or 100%) to the stepper component
• Adding a <v-container> with fill-height around or in the stepper
• Adding <v-spacer> between the card and the buttons

Without success. Ideally I would like the spacing between the card and the buttons to adjust with the screen size (hence the <v-spacer>). The buttons would set at the bottom of the screen.

Link to the draft codpen

Answer 1

Just add a style tag with height:100%.

From your code:

<v-stepper v-model="e1" style="height:100%">