Why is v-footer using 50% of the window height?

[mrcode86]

When i try this:
<v-app> <v-main>Test</v-main> <v-footer class="bg-indigo-lighten-1 text-center d-flex flex-column" > Footer</v-footer> </v-app>

The footer will take 50% of the height. In vuetify 2, the footer was not higher than what was required by its contents.

[yuwu9145]

apply app prop to position/size footer correctly within application layout system:

demo link

[scipilot]

But what if you don't want a fixed footer in the viewport? I prefer the footer to be at the bottom of the entire page and scroll off the screen. The app prop is supposed to be optional according to the documentation:

app | boolean | false

Determines the position of the footer. If true, the footer would be given a fixed position at the bottom of the viewport. If false, the footer is set to the bottom of the page.

app

With app, the height is correct. But without it, it seems to scale to different heights depending on the content height of the page. When there's less content on the page to not fill the viewport , the footer stretches up various amounts.

[vpiselli]

In that case, maybe move the v-footer component inside the v-main component and remove de app prop from the v-footer component.

[scipilot]

OK thanks, yes that does correct the problem that the footer height expands randomly (and ignores its own height param).

The drawback of this though is on short pages the footer sits high up, naturally resting just below the last content, but well above the browser viewport bottom - which looks weird. Of course this is technically correct for a non-fixed element, so I guess I need to implement a mechanism where it sticks to the viewport bottom on short pages, but then scrolls off on longer pages.

Like this (but with a shorter footer) https://css-tricks.com/snippets/css/sticky-footer/