Q-table fit on screen

[r35p3ct]

I apologize in advance if I ask my question in the wrong place.
Help the amateur, I can’t figure out how to fit the table into the screen size, taking into account the header and footer.
Heade in my code is the same size, but the table and footer can change. I only want to see the scroll bar at the table, not the entire page.

<script setup>
import {onMounted, ref} from "vue";

const rows=ref([])
const cols = [
  {name: 'id', label: 'id', field: 'id', align: 'left', sortable: true},
]
onMounted(()=>{
    for (let i = 1; i < 100; i++) {
        rows.value.push({id: i})
    }
})
</script>

<template>
          <q-header class="bg-brown-2">
            <div class="q-pa-xs" style="height: 60px">
              header
            </div>
          </q-header>
          <q-page>
            <div class="q-pa-md">
              <q-table
                  title="Тест"
                  :rows="rows"
                  :columns="cols"
                  row-key="id"
                  :rows-per-page-options="[0]"

              />
            </div>
          </q-page>
          <q-footer class="bg-blue-1">
            <div class="q-pa-xs" style="height: 75px">
              footer
            </div>
          </q-footer>
</template>