2
respuestas

¿Por qué se uso 110vh?

Referente al curso CSS Grid: Simplificando layouts, en el capítulo Diseñando la sección de destacados y actividad Creando la sección de destacados

por Juan Jacobo Mora Cerecero
| 48.4k xp | 23 posts

Para que la sección destacados ocupara el 100% de la pantalla e iniciara después de los 50px del encabezado el instructor le dio en destaques.css lo siguiente:

.destaques{
    display: grid;
    grid-template-columns:25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height:calc(110vh-50px);
}

¿Por qué uso 110vh si en style.css le definimos a dicha sección una altura de 100vh?

.app {
    background: #f1f1f1;
    display:grid;
    grid-template-areas:
    "encabezado"
    "contenido"
    "rodapie";
    grid-template-columns:auto;
    grid-template-rows:50px 100vh auto;

}
2 respuestas
por Carlos Eduardo Montalvo Rodriguez
| 107.8k xp | 3 posts

Tuve la misma duda, pero parece que se confundio, ya que mas adelante cuando ves

.destaques{
    display: grid;
    grid-template-columns:25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height:calc(110vh-50px);
}

Lo corrige a 100vh - 50px. El instructor sabe del tema, pero a veces coloca unos valores que no explica.Igual seguire mirando y leyendo la documentación de grid layout.

por Estudiante
| 164.2k xp | 14 posts

¡Hola!, yo también creo que fue un poco de confusión porque si lo dejas en 110vh el contenido cubre el rodapie, pero al colocarlo en 100vh queda perfecto. Lo que también pude notar fue que no coloquen juntos el operador y los valores dentro de calc() porque marca error. Si lo dejan así:

height: calc(100vh-50px);

No va a funcionar, en cambio si lo dejan con espacios como aquí:

height: calc(100vh - 50px);

Ya no van a tener problemas. Eso lo pueden revisar en la página de dev mozilla: https://developer.mozilla.org/es/docs/Web/CSS/calc, específicamente lo dice la segunda nota antes de los ejemplos.

Saludos!