Estoy tratando de usar una tabla de datos v con un encabezado fijo y un pie de página. Pero tengo un problema, si defino una altura para la tabla que es más grande que la altura de las filas, la tabla toma la altura que definí y el pie de página queda lejos de las filas.

Aquí hay un codepen

¿Hay una manera inteligente de resolver esto?

el html

 <div id="app"> <v-app id="inspire"> <div> <v-data-table height="300" v-model="selected" :headers="headers" fixed-header :items="desserts" item-key="name" > </v-data-table> </div> </v-app> </div>

JS

 new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { singleSelect: false, selected: [], headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name', }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Iron (%)', value: 'iron' }, ], desserts: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%', }, ], } }, })