How to make vuetify v-data-table vertically span all available space
In the official docs there's no way to do that but you could do it simply using CSS by adding the following rules :
.theme--light.v-datatable .v-datatable__actions { position: fixed; bottom: 0; width: 100%;}new Vue({ el: '#app', data() { return { //pagination: {}, headers: [{ text: 'Name', value: 'fridgeDisplayName' }, { text: 'State', value: 'state' }, { text: 'Task', value: 'task' }, ], alarms: [{ fridgeDisplayName: 'Test1', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test2', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test3', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test4', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test5', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test6', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test7', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test8', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test9', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test10', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test11', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test12', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test13', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test14', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test15', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test16', state: 'Some state', task: '6.0' }, { fridgeDisplayName: 'Test17', state: 'Some state', task: '6.0' } ] } }, computed: { /*pages () { if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null ) return 0 return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage) }*/ }}).theme--light.v-datatable .v-datatable__actions { position: fixed; bottom: 0; width: 100%;}<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css"><div id="app" data-app> <v-data-table :items='alarms' :headers="headers" class="elevation-1" fill-height> <template slot="items" slot-scope="props"> <td>{{ props.item.fridgeDisplayName }}</td> <td>{{ props.item.state }}</td> <td>{{ props.item.task }}</td> </template> </v-data-table></div>the full pen code