How to Float Container at Bottom of Page in Vue? - html

Question

I'm Currently working on a very Simple Website with VueJS.
I want to have a Container Floating at the Bottom of the Page, and i know how to do this with normal CSS, but because there are so many options in Vue and Vuetify i think that this Problem should be solveable with some sort of a tag.
My Current code is:
<template>
<div class="content">
<v-container class="test-container" grid-list-md text-xs-center fluid>
<v-layout row wrap>
<v-flex xl12>
<v-card dark color="primary">
<v-card-text class="px-0">Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row justify-space-around>
<v-flex xs4>
<v-card dark color="primary">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
<v-flex xs4>
<v-card dark color="accent">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row justify-space-between>
<v-flex xs4>
<v-card dark color="primary">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
<v-flex xs4>
<v-card dark color="accent">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xl12>
<v-text-field v-model="txtRequestText" box label="Test" type="text" prepend-inner-icon="place" append-icon="send" #click:append="sendRequest" #keyup.enter="sendRequest"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
The last v-layout with the Textfield in it is the one that should be Displayed at the very Bottom of the Page.
I already tried using align-end on a v-container as well as setting the height of the container to 100% and then using align-end on one of the layouts, but that did not work at all.
Is there a Best Practice way of doing this, or should i just solve it with normal CSS instead?
-Edit-
Here you also have a working version of it:
new Vue({
el: '#app',
data() {
return {
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.3.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify#1.3.0/dist/vuetify.min.css">
<div id="app" class="content" data-app>
<v-container class="test-container" grid-list-md text-xs-center fluid>
<v-layout row wrap>
<v-flex xl12>
<v-card dark color="primary">
<v-card-text class="px-0">Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row justify-space-around>
<v-flex xs4>
<v-card dark color="primary">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
<v-flex xs4>
<v-card dark color="accent">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row justify-space-between>
<v-flex xs4>
<v-card dark color="primary">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
<v-flex xs4>
<v-card dark color="accent">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xl12>
<v-text-field box label="Test" type="text"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</div>

Answer 1

I would say normal CSS. If you want the container to stay at the bottom I would suggest:
#id {
display: fixed;
bottom: 0;
}