Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

No logró que mi footer este en la parte inferior de la pantalla

Referente al curso CSS Grid: Simplificando layouts, en el capítulo Aplicar estilo al encabezado, menú y pie de página y actividad Centralizando contenidos

por Mariana Nayeli Gordillo Padilla
| 90.9k xp | 29 posts

Mi footer se queda en la sección despúes de destacados no toma el lugar al final depopulares

HTML

<footer class="rodapie">
        Todos los derechos reservados &copy 2022
    </footer>
    <script src="./assets/js/fontawesome.all.min.js"></script>
</body>
</html>

CSS

.app {
    background: #f1f1f1;
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-areas:
    "encabezado"
    "contenido"
    "rodapie";

    grid-template-columns: auto;
    grid-template-rows: 50px 100vh auto;
}

.rodapie { 
    background: #0099ff ;
    color: #333333;
    grid-area: rodapie;
    padding: 1rem;
    text-align: center;


}
4 respuestas
solución!
por Olman Morales Fuentes
| 73.8k xp | 6 posts
    grid-template-columns: auto;
    grid-template-rows: 50px 100vh auto;
}

Saludos! todo el codigo esta bien, pero donde dice 100vh hay q corregir a auto, así se resolverá lo del footer. hay un post de unas semanas atrás donde lo explican. Saludos!

por Guillermo Edgardo Murcia Valladares
| 199.7k xp | 249 posts

Espero esa solución sea la que resuelve la inquietud de otra forma si puedes compartir el HTML completo y el CSS pata darle un vistazo

por Olman Morales Fuentes
| 73.8k xp | 6 posts
.app {
    background: #f1f1f1;
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-areas: 
    "encabezado"
    "contenido"
    "rodapie";
    grid-template-columns: auto;
    grid-template-rows: 50px auto auto;
}

.encabezado {    
    align-items: center;
    display: flex;
    grid-area: encabezado; 
    padding: 0 2rem; 
}

.menu__link{
    color: #333333;
    padding: .5rem 1rem;
}

.menu__link:hover, .menu__link:active{
    border-bottom: 2px solid #0073E6;
}

.contenido {    
    grid-area: contenido;
    padding: 0 2rem;
}

.rodapie {    
    background: #FDFDFD;
    color: #333333;
    grid-area: rodapie;  
    padding: 1rem;
    text-align: center;
}

Saludos! aca te comparto el código de mi CSS, para q lo puedas comparar.

por Delio Gutiérrez Valencia
| 70.1k xp | 26 posts

Marian, como va... espero que bien ... Hice esto .app { background: #f1f1f1; /* Color de fondo/ font-family: Arial, Helvetica, sans-serif; / Tipos de letra a utilizar/ /display: grid; /* Ver el cuerpo de la página como un grid / * AL CUBRIR EL grid FUNCIONÓ, No se enloqueció la página *** / Vamos a definir dentro de nuestro grid que áreas se van a trabajar / grid-template-areas: "encabezado" "contenido" "footer"; / Columnas que se van a definir dentro del body va hacer el tamaño de la pantalla del equipo / grid-template-columns: auto; / Que tamaños de filas se van a colocar para cada espacio se coloca grid-template-rows Header Contenido Footer / grid-template-rows: 50px 100vh auto; / El virtual height o altura virtual o vh, como se ha colcado al contenido con 100vh, marca todo el contenido en la pagina con el color de fondo que se le dio*/

}