title: Vue Quasar Layout Drawer with Footer
body: <p>Trying to get a footer to appear on my q-drawer. This is my template and component</p>
  <pre><code>&lt;template&gt;
    &lt;q-layout view=&quot;hHh lpR fFf&quot;&gt;
      &lt;q-header elevated&gt;
        &lt;q-toolbar&gt;
          &lt;q-btn flat dense round icon=&quot;menu&quot; aria-label=&quot;Menu&quot; @click=&quot;drawer = !drawer&quot; /&gt;
        &lt;/q-toolbar&gt;
      &lt;/q-header&gt;
  
      &lt;q-drawer
        v-model=&quot;drawer&quot;
        show-if-above
        :mini=&quot;!drawer || miniState&quot;
        @click.capture=&quot;drawerClick&quot;
        width=&quot;200&quot;
        bordered
        class=&quot;no-scrollbar&quot;
        content-class=&quot;bg-grey-3&quot;
      &gt;
        &lt;q-scroll-area class=&quot;fit&quot;&gt;
          &lt;q-list padding&gt;
            &lt;q-item clickable v-ripple exact to=&quot;/&quot;&gt;
              &lt;q-item-section avatar&gt;
                &lt;q-icon name=&quot;home&quot; /&gt;
              &lt;/q-item-section&gt;
  
              &lt;q-item-section&gt;
                Home
              &lt;/q-item-section&gt;
            &lt;/q-item&gt;
  
            &lt;q-item clickable v-ripple to=&quot;/install&quot;&gt;
              &lt;q-item-section avatar&gt;
                &lt;q-icon name=&quot;get_app&quot; /&gt;
              &lt;/q-item-section&gt;
  
              &lt;q-item-section&gt;
                Install
              &lt;/q-item-section&gt;
            &lt;/q-item&gt;
  
            &lt;q-item clickable v-ripple to=&quot;/manage&quot;&gt;
              &lt;q-item-section&gt;
                Manage
              &lt;/q-item-section&gt;
            &lt;/q-item&gt;
  
            
            &lt;!-- I want the below to appear down at the bottom of the drawer as a footer --&gt;
  
            &lt;q-separator /&gt;
  
            &lt;q-item clickable v-ripple @click=&quot;$msal.signOut()&quot;&gt;
              &lt;q-item-section avatar&gt;
                &lt;q-icon name=&quot;logout&quot; /&gt;
              &lt;/q-item-section&gt;
  
              &lt;q-item-section&gt;
                Sign Out
              &lt;/q-item-section&gt;
            &lt;/q-item&gt;
          &lt;/q-list&gt;
        &lt;/q-scroll-area&gt;
  
        &lt;div class=&quot;q-mini-drawer-hide absolute&quot; style=&quot;top: 15px; right: -17px&quot;&gt;
          &lt;q-btn dense round unelevated color=&quot;blue&quot; icon=&quot;chevron_left&quot; @click=&quot;miniState = true&quot; /&gt;
        &lt;/div&gt;
      &lt;/q-drawer&gt;
  
      &lt;q-page-container&gt;
        &lt;router-view /&gt;
      &lt;/q-page-container&gt;
    &lt;/q-layout&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from '@vue/composition-api';
  
  export default defineComponent({
    data() {
      return {
        drawer: false,
        miniState: false
      };
    },
  
    methods: {
      drawerClick(e: Event) {
        if (this.miniState) {
          this.miniState = false;
          e.stopPropagation();
        }
      }
    }
  });
  &lt;/script&gt;
  
  </code></pre>
  <p>Unfortunately, if I add <code>class=&quot;fixed-bottom&quot;</code> to the Sign Out item, the scrolling gets messed up and when the window gets small enough vertically, the Sign Out item starts appearing on top of the other list items.</p>
  <p>How can I make a fixed footer for my Sign Out button that doesn't mess up the scroll area?</p>