Imagine a scenario where there is content above and below a table on a webpage. The goal is to get the table to occupy the remaining height of the page without affecting other elements. This ensures that the content below the table is always visible at the bottom of the page.
To see a sample code demonstrating this, click link.
In attempting to implement flex-direction: column on the div element, it became apparent that this solution was not ideal, as it did not restrict the size of elements to limit the total page height. Consequently, a different approach was necessary.
A potential solution could involve utilizing a grid system with a similar layout to the one shown Given a page with some content above and below a table. I want that table to fill the remaining height of the page, other elements should not be affected. So the content below that table should always be visible at the bottom of the page. This is my reproduction sample code I tried to add flex with So I tried to use a grid like this but as you can see in the playground things are getting even worse. This is what I'm looking for I think that I could solve this with CSS and vanilla JavaScript but I'm looking for a "Vuetify" solution. There might not be a ready-made Vuetify solution available, but you don't need a lot of CSS to solve this: If you want to hide the disabled full page scrollbar, simply include: This might not work in the playground due to the iframe, but it should function correctly on your local environment. There isn't a Vuetify solution as far as I know, but the solution doesn't require that much CSS: To hide the disabled full page scrollbar you can add It just doesn't work in the playground because of the iframe, but should work locally.<template>
<v-app>
<v-main>
<div>
<v-alert type="success" title="Some content above"></v-alert>
<div class="my-2">some more content</div>
<v-table>
<thead>
<tr>
<th>Col 1</th>
</tr>
</thead>
<tbody>
<tr v-for="i in 100">
<td>{{ i }}</td>
</tr>
</tbody>
</v-table>
<v-pagination :model-value="1" :length="10" class="my-2"></v-pagination>
</div>
</v-main>
</v-app>
</template>
flex-direction: column to the div element but I think that's not correct, I don't want the elements to grow/shrink, I have to limit the page height first.<template>
<v-app>
<v-main>
<v-container class="fill-height">
<v-row>
<v-col>
<v-alert type="success" title="Some content above"></v-alert>
</v-col>
</v-row>
<v-row>
<v-col>
<div class="my-2">some more content</div>
</v-col>
</v-row>
<v-row>
<v-col>
<v-table>
<thead>
<tr>
<th>Col 1</th>
</tr>
</thead>
<tbody>
<tr v-for="i in 100">
<td>{{ i }}</td>
</tr>
</tbody>
</v-table>
</v-col>
</v-row>
<v-row>
<v-col>
<v-pagination :model-value="1" :length="10" class="my-2"></v-pagination>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.v-alert {
overflow: visible;
}
.v-table {
overflow-y: auto;
}
html {
overflow: hidden;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.v-alert {
overflow: visible;
}
.v-table {
overflow-y: auto;
}
html {
overflow: hidden;
}