Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

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

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!
    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!

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

.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.

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*/

}