¿Habría diferencia si uso en un header <strong>width: 100vw;</strong> o <strong>width: 100%;</strong>?

Christian Alvarenga

Christian Alvarenga

Pregunta
studenthace 4 años

¿Habría diferencia si uso en un header width: 100vw; o width: 100%;?

4 respuestas
para escribir tu comentario
    Christian Alvarenga

    Christian Alvarenga

    studenthace 4 años

    Muchas gracias por tu aporte Julian.

    Julian Felipe Salazar Rivera

    Julian Felipe Salazar Rivera

    studenthace 4 años

    como te comentaba aveces lo genera aveces no , yo creo ya va a depender de como esta construido el index, si tu haces un index super basico de 1 main y dentro de este pones 2 divs , si a main le pones widht:100vw problamente no te genere el scroll horizontal hasta que empiezes a modificar tus divs.

    Christian Alvarenga

    Christian Alvarenga

    studenthace 4 años

    Ya estuve haciendo las pruebas y es justamente como comentas. Al usar el 100vw, me generar un pequeño scroll horizontal y creo que es por que en la parte derecha de nuestra pantalla tenemos el scroll vertical y para que aparezca todo el vw nos genera ese molesto scroll pero, con el 100% no me generó. Lo que no me queda muy en claro (y tampoco lo comprobé aún) es que si uso el 100vw para el main, según mi lógica creo que también me generaría un scroll, ¿o no? 🤔

    Julian Felipe Salazar Rivera

    Julian Felipe Salazar Rivera

    studenthace 4 años

    Hola Calvarenga96, teoricamente no , pero aveces dejar width: 10vw: puede traernos algunos problemas especialmente porque suele poner un scroll horizontal, no todas las veces pero creo que preferiblemente dejarlo en medidas porcentuales " %" .

    Ademas las medidas "vw o vh" es mejor dejarlas para los elementos padres como body , main o container ya que si utilizas estas medidas en elementos internos de estos padres lo que va a suceder es que sobresalen.

    ejemplo: si tienes un main y le pones width:100vw y un height:50vh , pero dentro de este main tienes 2 divs y les pones las mismas medidas, lo que va a suceder es que los hijos (divs) van a sobre salir de su elemento padre (main) porque les estas diciendo a los 3 que tengan medidas respecto al viewport , osea al espacio visual mas no al espacio de su padre.

    resumido vw o vh se refiere al espacio visual (viewport) y no importa se esas medidas se las pones a un padre o a un hijo siempre van hacer las mismas medias, por lo tanto para los elementos hijo es mejor utlizar medidas % para que ocupen el espacio de su elemento padre y no sobre salgan.

    espero haberte ayudado. Saludos ✌

    te dejo el siguiente enlace donde lo explican muy bien https://www.yunbitsoftware.com/blog/2017/06/22/viewport-units-css-que-es/

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Curso de HTML y CSS [Empieza Gratis]
Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.