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>
2 respuestas
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
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
Nuevas preguntas
vue.js
Vue.js es un marco Javascript progresivo de código abierto para construir interfaces de usuario que apuntan a ser incrementalmente adoptables. Vue.js se utiliza principalmente para el desarrollo front-end y requiere un nivel intermedio de HTML y CSS. Las preguntas específicas de la versión de Vue.js deben etiquetarse con [vuejs2] o [vuejs3].