Make drawer take up full height

[sevan]

What is the proper way to force a “footer” to the bottom of a drawer that does not have enough items to fill the height of the screen?

I do not want a footer across the whole layout, just the drawer, as shown here:

Thanks so much.

    <div slot="left" class="bg-blue">
        <div class="bg-red">Test Header</div>
        <q-list no-border link inset-delimiter>
          <q-item @click="launch('http://quasar-framework.org')">
            <q-item-main label="Docs" />
          </q-item>
        </q-list>
        <div class="bg-green">Test Footer</div>
    </div>

[benoitranque]

Try this

[sevan]

@benoitranque Thank you for the tip. This breaks if we limit the number of items in each column:

I’m also not sure what classes to apply for quasar <0.15 as this appears to be mostly new components.

I appreciate your input.

[benoitranque]

The classes you are using are the flexbox css helper classes

I’m not sure what you mean by it “breaks”

Please fork that fiddle and make is as close to what you need as possible so I can understand the issue

[sevan]

@benoitranque https://jsfiddle.net/z8bxt0w6/1/

I think it’s doing some sort of height calculation based on the window height, which if we then reduce the window height to a point where the drawer has a scroll bar, the footer is no longer fixed to the bottom of the screen.