Tengo problemas con v-footer. Superpone el contenido. Veo que esto sucede cuando incluyo imágenes. Mira este bolígrafo:

https://codepen.io/slayerbleast/pen/zYxYXZL

Si avanza hasta el final, verá cómo crece el pie de página al final superponiendo el contenido, ¿por qué hacer eso? Solo quiero que el pie de página cree su propio espacio ... Y este efecto es peor para dispositivos pequeños, solo cambia el tamaño de la ventana

Este es el diseño:

  <v-app>
    <div class="header">
        <v-navigation-drawer v-model="drawer" app>
            <v-list-item>
                <v-list-item-content>
                    <v-list-item-title class="title">
                        {{ user.name }}
                    </v-list-item-title>
                </v-list-item-content>
            </v-list-item>
            <v-divider></v-divider>

            <template v-slot:append>
                <v-list-item link @click="logout">
                    <v-list-item-icon>
                        <v-icon>logout</v-icon>
                    </v-list-item-icon>

                    <v-list-item-content>
                        <v-list-item-title>
                            logout
                        </v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </template>
        </v-navigation-drawer>

        <v-app-bar
            absolute
            app
            dark
            height="100"
            class="px-12"
        >
            (...)
        </v-app-bar>
    </div>


    <v-content>
        <p> content </p>
    </v-content>


    <v-footer absolute inset app width="auto" class="py-12">
        <v-container>
            <v-row justify="center">
                <v-col lg="2" md="3" cols="12" align-self="center">
                    <v-img src="https://picsum.photos/id/419/200/300"
                           max-width="50"
                           max-height="50">
                    </v-img>
                </v-col>
            </v-row>
        </v-container>
    </v-footer>
  </v-app>
1
slayerbleast 3 dic. 2019 a las 14:42

2 respuestas

La mejor respuesta

Se agregó heigth="200" al pie de página v:

<v-footer absolute inset app height="200" width="auto" class="py-12">
    <v-container>
        <v-row justify="center">
            <v-col lg="2" md="3" cols="12" align-self="center">
                <v-img src="https://picsum.photos/id/419/200/300"
                       max-width="50"
                       max-height="50">
                </v-img>
            </v-col>
        </v-row>
    </v-container>
</v-footer>

https://codepen.io/TheEvilThinker/pen/JjooLmM

1
4 R4C81D 4 dic. 2019 a las 07:54

Elimine los accesorios absolute y app ...

<div id="app">
  <v-app>
    <v-content>
      ...
    </v-content>
    <v-footer inset width="auto" class="py-12">
        <v-container>
            <v-row justify="center">
                <v-col lg="2" md="3" cols="12" align-self="center">
                    <v-img src="https://picsum.photos/id/419/200/300"
                           max-width="50"
                           max-height="50">
                    </v-img>
                </v-col>
            </v-row>
        </v-container>
    </v-footer>
  </v-app>
</div>

https://codeply.com/p/1BmDspkD9n

0
Codeply-er 3 dic. 2019 a las 11:54