@@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!
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 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!!!
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!
Excelente, este es el tipo de contenido que definitivamente yo necesito para aprender a dominar el front verdaderamente. ❤❤❤ me encanto. Gravias hermano
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.
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
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.
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
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
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.
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
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 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;
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; }
![LAVROV's interview with Tucker CARLSON 😁 [Parody]](http://i.ytimg.com/vi/mbMemqc-QEk/mqdefault.jpg)
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
Estas pequeñas cosas con las que uno lucha tanto, muchas gracias por el vídeo
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!
De verdad que era un video que no pensaba que necesitaba, jajaja que gran aporte y que gran 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 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!!!
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!
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!
Excelente, este es el tipo de contenido que definitivamente yo necesito para aprender a dominar el front verdaderamente. ❤❤❤ me encanto. Gravias hermano
Excelente, muy bueno el tips. Cortito y preciso.
Excelente! Gracias por la data.
@@msolangeg11 😎💪🏼
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.
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!
Muchas gracias! Información de vital importancia lo del footer y lo de las alturas dinámicas , me sirve mucho, saludos!
Excelente video, gracias!
Muy buena explicación y muy buena información, sobre todo la unidad de medida dvh. Gracias .
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.
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
muchas gracias, era lo q estaba buscando hace tiempo
Buenísimo Carpi, super útil, se agradece!!!
Excelente explicación!
Impecable, muchas gracias Carpi!!
gracias por comparir tus conocimientos, excelente solución
Muy bueno, gracias 👌
apoyando!!!
un lujo la calidad del video como de la forma de enseñar..
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
Tremendo aporte genio, muy util, ya mismo lo voy a probar en un proyecto que estoy haciendo.
Saludos crack!!!!
Vamoooo
Muy buen video!
Grande Carpi. Buen tip.
Justo hoy estaba teniendo el problema hermano, muchas gracias. Soy de back y me dio un dolor de cabeza esto jajaja
Si me ha pasado, muchas gracias por tu video
Que buen video necesitaba esto
Me vi los 9 minutos sin pestañear, buen video y buena info me sirve como jr.
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
toda mi vida haciendolo con fixed y me sale este video de manera random, gracias bro, nice video xD
Así mismo lo solucionaba.
genial.
gracias!
Esto es increíble
Esta muy bueno, yo suelo utilizar es flexbox, flex-grow para main y flex-shrink para el footer y ya queda
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
Un geniooo
Simple pero no simplista. Me encantó 🎉
Gracias! Lo amo
gracias por compartir, he aprendido algo nuevo. +suscripción :)
muy buen video!
Muchas gracias!
Buen video bro
Excelente solución! Gracias por compartir!
buenisimo estimado.
Muy buen dato, ahorra mucho tiempo!
Posta que soluciona horas de laburo esto. Siempre tuve este faking problema.
Gracias!
Muy bien explicado, gracias Carpi. Saludos!
@@ClassCode- 💖💪🏼
Pro!! Gracias!!
Tremendo video man
Lo que he aprendido contigo, Carpi. Abrazo fuerte.
@@cesardelgado5138 abrazo César!
Excelente Carpi !
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
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 🙌🏼🙌🏼🙌🏼
Gracias por el video!!
Wow wow wow genio gracias.
Maestro gracias, ya pude resolver lo del maldito footer ♥
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.
Jaja que buen video... Gracias
Que grande que sos
Muy bueno!!! 👌🏼🚀
Buenísimo tip
excelente explicacion !! me suscribo
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 😅
Buen videooo
Brutal!
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
JAJA grande !
Gracias buen joven
que buen vídeo! gracias!
@@sebrival muchas gracias! 💪🏼
buenisimo me sirvio
Gracias por la info
Conocimiento valido papu
muyy buen video!!! muchas gracias , algun curso completo de 0 a experto de css que puedas recomendar donde cosas como esta se expliquen..saludos
Muchaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas Gracias.
adelante maestro......
excelente
Me sirvió una banda. +10 a favs denunciado por crapero. Recontra suscribido, un abrazo crack!
@@Gerardo_Sofovich 😂😂😂
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
Genial esplicacion , excelente
Grade carpi!
@@jorgegamboa5408 🙌🏼 abrazo Jorge!
Un capo
Una pelea de todos los tiempos …
Noooo, el absolute bottom:0 me rompio el corazon
Genial, estaba sufriendo con el footer
Gracias algoritmo de youtube por recomendarme este video 10/10
buenas, me subscribo!
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;
}
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;
}
Nítido mi hermano, también con flex y justify-between
Buena data