@@CR-lk8fx después de grabar el video me di cuenta que debería haberlo hecho revés: primero la solución, después las explicaciones jajaja gracias por marcar el minuto!
Excelente explicación, yo por costumbre trabajo mucho con proyectos que usan Bootstrap y la forma en la que siempre debo ajustar el footer me daba muchos dolores de cabeza, esta solución es perfecta. 💪
Sos un groso, no hago front pero siempre tengo que resolver algo de front y este es uno de esos temas. Me salvaste... te ganaste un seguidor. Mil gracias por hacer fácil lo que a los back se nos hace difícil!!!
Excelente, este es el tipo de contenido que definitivamente yo necesito para aprender a dominar el front verdaderamente. ❤❤❤ me encanto. Gravias hermano
Como alternativa (y más sencilla) es estilar el body (o el div en tu caso, yo lo prefiero directamente al body) darle display: flex, y al main darle flex-grow y queda solucionado
Después de aprender a centrar divs, esto fue lo que más me llevó adaptar en su tiempo, si bien ya lo sabía, siempre está bueno refrescar la memoria, muchas gracias por el video!
Hermano, ya tengo desarrollando mis añitos y siempre ha sido un dilema lo del footer, siempre intento formas nuevas de reorganizarlo, honestamente probablemente se me olvide si una vez lo hice de manera eficiente, pero, tu forma me ha encantado ! :)
Excelente video tuto, con variantes explicación de las mismas, ver que no y por qué Y la solución adecueda, mi like y mi agradecimiento por compartir tu experiencia y conocimiento, gracias.
Muy util gracias, me gusto el contenido para solucionar un problema tipicos a la hora de estilar. Voy a guardar este video junto con algunos otros que tengo de cosas que cada tanto me olvido y tengo que recordar.
Jajaja, me encanta que el video describe el problema tal cual como todos nosotros lo decimos y no usa palabras bonitas o tan tecnicas para que suene mejor como en otros lados
MÁS FACIL TODAVÍA. Ya que se envolvió todo en un contenedor es ponerle a ese contenedor display flex y al footer ponerle margin-top: auto. No precisas mas nada, nada de height, nada de auto 1fr auto
Si redimensionas el navegador y lo haces como de una cuarta parte de la pantalla, se te ve la mitad con el header, la otra mitad con el main y el footer no se ve.
excelente y practico... habia encontrado en su momento soluciones en javascript que no son las más eficientes... siempre he pensado que si se puede solucionar con css aprovechemos
Soy Dev back-end y es lo que hago jajaja. Pensé que estaba mal. Pero veo que está bien. Aparte es dinámica y se adapta a las pantallas muy fácil El dvh no la sabia.
buen tutorial, deberias de hacer un video actualizacion de las nuevas medidas que sacaron en css y como seria el uso para casa situacion, exelente video
Otra solucion es con Flexbox: Body { Height: 100%; Display: flex; flex-direction: column; } Main { Flex: 1; } Hace lo mismo que la solucion de grid estira el main para que ocupe todo el espacio disponible del header y footer
Excelente video. Solo un detalle en el min-height. Agrega los 2 en el siguiente orden...esto solo em caso que haya alguna persona con un browser que no este actualizado o no soporte la opción dvh. Saludos JB min-height: 100vh; min-height: 100dvh;
Por cierto como recomiendas realizar el min-height y el min-width. Yo realmente realizo buenos diseños pero siento a veces que no siguen una buena practica
Podés adaptar la grilla con columnas sin problemas, lo mismo con que haya más filas, lo importante es que el main tenga el 1fr para llevarse el contenido sobrante, y el resto con auto!
Puedes explicar a detalle el por que el div no aporta carga semantica? O mejor: Por que es semanticamente correcto tener un div que haga wrap a todo? Gracias.
A mi personalmente me gusta hacerlo con flex, es el mismo concepto. Colocas el contenedor que englobe todo, min-h 100 vh, flex, flex direction column y al main le colocas flex: 1;
Buen vídeo, en mi caso a mi no me gusta que se vea el footer incluso si hay poco contenido, lo prefiero con el scroll. Pero igual nunca está nada mal aprender algo nuevo, lo del dvh me lo apunté.
@Carpi Coder este codigo es mejor y ayuda a evitar problemas con gente que usa librerías como AOS o tiene una web muy completa con animaciónes y efectos varios, funciona exactamente igual pero arregla muchos problemas .container-all { display: flex; flex-direction: column; min-height: 100vh; /* Usar 100vh en lugar de 100dvh para asegurar compatibilidad en diferentes navegadores */ } main { flex: 1; }
Ahí tenés el problema de que si el footer cambia de tamaño en diferentes anchos de pantalla, no es algo que puedas controlar tan fácilmente. Números mágicos siempre son un problema!
Parece una tontería este clase de video pero es super útil! Buen título para captar a los juniors! SOLUCIÓN en el minuto 6:12
@@CR-lk8fx después de grabar el video me di cuenta que debería haberlo hecho revés: primero la solución, después las explicaciones jajaja gracias por marcar el minuto!
@@carpicoder Amigo, yo creo que el vídeo está bien, no le hagas caso a la gente que siempre se queja de todo
@@carpicoder Me ha gustado tu video. Como desarrollador web a veces creo no hago buenas prácticas. Este tipo de video me ayuda. Gracias y sigues así!
@@carpicoder La verdad que a mí me agradó más que la explicación esté en el principio.
Juniors? Un junior es alguien que tiene el conocimiento pero no tiene experiencia o tiene muy poca.
Los que no saben no son juniors
Maldito footer , se tenía que decir
@@Deus-lo-Vuilt 🤣🤣
@@carpicoder 🤣🤣🙌
No hay mejor título para este vídeo que el de la miniatura, a mi si me sirvió. Gracias!
@@angelgodinez4225 😆 Siempre es una tarea complicada mover ese footer!
Excelente explicación, yo por costumbre trabajo mucho con proyectos que usan Bootstrap y la forma en la que siempre debo ajustar el footer me daba muchos dolores de cabeza, esta solución es perfecta. 💪
Estas pequeñas cosas con las que uno lucha tanto, muchas gracias por el vídeo
De verdad que era un video que no pensaba que necesitaba, jajaja que gran aporte y que gran video.
el footer es un dolor de cabeza cuando uno esta empezando, te ganaste un subs y buen like. Se tenía que decir, y se dijo!
Sos un groso, no hago front pero siempre tengo que resolver algo de front y este es uno de esos temas. Me salvaste... te ganaste un seguidor. Mil gracias por hacer fácil lo que a los back se nos hace difícil!!!
Excelente, muy bueno el tips. Cortito y preciso.
Excelente, este es el tipo de contenido que definitivamente yo necesito para aprender a dominar el front verdaderamente. ❤❤❤ me encanto. Gravias hermano
Como alternativa (y más sencilla) es estilar el body (o el div en tu caso, yo lo prefiero directamente al body) darle display: flex, y al main darle flex-grow y queda solucionado
@@jmp89 sí, justo respondí esto en un comentario hace un rato!
Después de aprender a centrar divs, esto fue lo que más me llevó adaptar en su tiempo, si bien ya lo sabía, siempre está bueno refrescar la memoria, muchas gracias por el video!
Hermano, ya tengo desarrollando mis añitos y siempre ha sido un dilema lo del footer, siempre intento formas nuevas de reorganizarlo, honestamente probablemente se me olvide si una vez lo hice de manera eficiente, pero, tu forma me ha encantado ! :)
Excelente video tuto, con variantes explicación de las mismas, ver que no y por qué
Y la solución adecueda, mi like y mi agradecimiento por compartir tu experiencia y conocimiento, gracias.
Muy buena explicación y muy buena información, sobre todo la unidad de medida dvh. Gracias .
Muchas gracias! Información de vital importancia lo del footer y lo de las alturas dinámicas , me sirve mucho, saludos!
Esto lo ocupaba hace 3 meses jeje ❤ pero se agradece que si hay un cideo
@@AP.MakeUp 💪🏼🙌🏼
Muy util gracias, me gusto el contenido para solucionar un problema tipicos a la hora de estilar. Voy a guardar este video junto con algunos otros que tengo de cosas que cada tanto me olvido y tengo que recordar.
gracias por comparir tus conocimientos, excelente solución
Excelente! Gracias por la data.
@@msolangeg11 😎💪🏼
Excelente video, gracias!
muchas gracias, era lo q estaba buscando hace tiempo
un lujo la calidad del video como de la forma de enseñar..
Justo hoy estaba teniendo el problema hermano, muchas gracias. Soy de back y me dio un dolor de cabeza esto jajaja
Tremendo aporte genio, muy util, ya mismo lo voy a probar en un proyecto que estoy haciendo.
Saludos crack!!!!
Vamoooo
Buenísimo Carpi, super útil, se agradece!!!
Jajaja, me encanta que el video describe el problema tal cual como todos nosotros lo decimos y no usa palabras bonitas o tan tecnicas para que suene mejor como en otros lados
Si me ha pasado, muchas gracias por tu video
MÁS FACIL TODAVÍA. Ya que se envolvió todo en un contenedor es ponerle a ese contenedor display flex y al footer ponerle margin-top: auto. No precisas mas nada, nada de height, nada de auto 1fr auto
Si redimensionas el navegador y lo haces como de una cuarta parte de la pantalla, se te ve la mitad con el header, la otra mitad con el main y el footer no se ve.
@@gantonal no entendí bien lo de las dimensiones pero a mí me funciona bro
toda mi vida haciendolo con fixed y me sale este video de manera random, gracias bro, nice video xD
excelente y practico... habia encontrado en su momento soluciones en javascript que no son las más eficientes... siempre he pensado que si se puede solucionar con css aprovechemos
Así mismo lo solucionaba.
genial.
gracias!
Excelente explicación!
Esta muy bueno, yo suelo utilizar es flexbox, flex-grow para main y flex-shrink para el footer y ya queda
gracias por compartir, he aprendido algo nuevo. +suscripción :)
Lo que he aprendido contigo, Carpi. Abrazo fuerte.
@@cesardelgado5138 abrazo César!
Simple pero no simplista. Me encantó 🎉
Soy Dev back-end y es lo que hago jajaja. Pensé que estaba mal. Pero veo que está bien.
Aparte es dinámica y se adapta a las pantallas muy fácil
El dvh no la sabia.
@@cristian_albornoz 🙌🏼🙌🏼🙌🏼
Posta que soluciona horas de laburo esto. Siempre tuve este faking problema.
Gracias!
Muy bien explicado, gracias Carpi. Saludos!
@@ClassCode- 💖💪🏼
Excelente solución! Gracias por compartir!
Impecable, muchas gracias Carpi!!
Muy buen dato, ahorra mucho tiempo!
Muy bueno, gracias 👌
apoyando!!!
Vi luz y entre y ahora estoy aplicando todo lo que explicaste... fuck footer! I love querido Carpi, ahi me suscribi!
@@diecau fvck footer no! Amor a CSS es lo que nos une 😆
@@carpicoder jajaja tenés razón
Grande Carpi. Buen tip.
Buen video. Si pudieras indicar las primeras clases del main.css para poder replicar el ejercicio. Saludos.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, sans-serif;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: pink;
}
ul {
list-style: none;
display: flex;
gap: 1rem;
}
a {
color: black;
}
section {
padding: 2rem;
}
footer {
background-color: pink;
padding: 1rem 2rem;
text-align: center;
}
.container {
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
}
muyy buen video!!! muchas gracias , algun curso completo de 0 a experto de css que puedas recomendar donde cosas como esta se expliquen..saludos
Que buen video necesitaba esto
buen tutorial, deberias de hacer un video actualizacion de las nuevas medidas que sacaron en css y como seria el uso para casa situacion, exelente video
Excelente, mi hermano, es algo que me costo aprenderlo, además he visto muchos páginas que tienen el mismo problema. 😂
Sabiduria ancestral de Carpi el sensei Coder !!! Gracias
Muy buen video!
Nítido mi hermano, también con flex y justify-between
Una pelea de todos los tiempos …
Odiaba bastante este tipo de temas, por eso me fui al backend pero me acabas de hacer entender la vida con este video :O
@@alejandrocastellanos9549 vamooo ahora a darle cariño a CSS 😅
Esto es increíble
Muchas gracias!
Gracias! Lo amo
Me vi los 9 minutos sin pestañear, buen video y buena info me sirve como jr.
Trucado, muy bueno.
Me pregunto si funciona con flex
Parece que se puede usando el mismo min-height:; pero en vez de viewport heigh, usar dinamic viewport heigh (dvh)
excelente explicacion !! me suscribo
Excelente Carpi !
Otra solucion es con Flexbox:
Body {
Height: 100%;
Display: flex;
flex-direction: column;
}
Main {
Flex: 1;
}
Hace lo mismo que la solucion de grid estira el main para que ocupe todo el espacio disponible del header y footer
Así es como lo uso yo. Aunque en Height pongo 100vh porqué así lo aprendí pero supongo que es exactamente lo mismo que 100%.
Esta bien tu solución , solo que es 100vh en vez de 100%
Cierto se ocupa el vh y tambien puedes ocupar el min-height en el body de esta manera logras que siempre el body se estire al 100vh en todo momento.
Maestro gracias, ya pude resolver lo del maldito footer ♥
buenisimo estimado.
muy buen video!
Gracias por el video!!
Excelente video.
Solo un detalle en el min-height.
Agrega los 2 en el siguiente orden...esto solo em caso que haya alguna persona con un browser que no este actualizado o no soporte la opción dvh.
Saludos
JB
min-height: 100vh;
min-height: 100dvh;
@@juanalbertoboada buen dato, siempre los uso juntos, me parecía complicar más el video jajajaja
para este casi sientes que es mejor utilizar grid o flex? En tu caso como utilizas cada uno. o recomiendas solo utilizar uno?
Por cierto como recomiendas realizar el min-height y el min-width. Yo realmente realizo buenos diseños pero siento a veces que no siguen una buena practica
Genial, estaba sufriendo con el footer
que buen vídeo! gracias!
@@sebrival muchas gracias! 💪🏼
Me sirvió una banda. +10 a favs denunciado por crapero. Recontra suscribido, un abrazo crack!
@@Gerardo_Sofovich 😂😂😂
Hola soy nuevo en el canal, consulta, y si la distribucion agregara un ASIDE al lado del main o por debajo del main?, funcionaria tambien?
Podés adaptar la grilla con columnas sin problemas, lo mismo con que haya más filas, lo importante es que el main tenga el 1fr para llevarse el contenido sobrante, y el resto con auto!
Jaja que buen video... Gracias
Un geniooo
Wow wow wow genio gracias.
Puedes explicar a detalle el por que el div no aporta carga semantica? O mejor: Por que es semanticamente correcto tener un div que haga wrap a todo? Gracias.
Noooo, el absolute bottom:0 me rompio el corazon
adelante maestro......
Gracias algoritmo de youtube por recomendarme este video 10/10
Pro!! Gracias!!
A mi personalmente me gusta hacerlo con flex, es el mismo concepto. Colocas el contenedor que englobe todo, min-h 100 vh, flex, flex direction column y al main le colocas flex: 1;
@@joancorona1984 Genial! Sí, es el mismo resultado, hasta te diría que no hay ninguna diferencia real en la práctica je
Buen vídeo, en mi caso a mi no me gusta que se vea el footer incluso si hay poco contenido, lo prefiero con el scroll. Pero igual nunca está nada mal aprender algo nuevo, lo del dvh me lo apunté.
Tremendo video man
Gracias por la info
Muchaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas Gracias.
Gracias buen joven
Muy bueno!!! 👌🏼🚀
Buenísimo tip
Buen video bro
Genial esplicacion , excelente
@Carpi Coder
este codigo es mejor y ayuda a evitar problemas con gente que usa librerías como AOS o tiene una web muy completa con animaciónes y efectos varios, funciona exactamente igual pero arregla muchos problemas
.container-all {
display: flex;
flex-direction: column;
min-height: 100vh; /* Usar 100vh en lugar de 100dvh para asegurar compatibilidad en diferentes navegadores */
}
main {
flex: 1;
}
Que grande que sos
Brutal!
No seria mejor usar el calc?
Min-height: calc(100vh - [alto del footer])
Ahí tenés el problema de que si el footer cambia de tamaño en diferentes anchos de pantalla, no es algo que puedas controlar tan fácilmente. Números mágicos siempre son un problema!
buenisimo me sirvio
excelente