Una pregunta frecuente en el diseño de sitios web es "¿cómo se establece la altura de un elemento en 100%"?
Esto puede parecer una respuesta fácil. Simplemente usa CSS para establecer la altura de un elemento en 100%, pero esto no siempre hace que ese elemento se ajuste a toda la ventana del navegador. Averigüemos por qué sucede esto y qué puede hacer para lograr este estilo visual.
Píxeles y porcentajes
Cuando define la altura de un elemento utilizando la propiedad CSS y un valor que utiliza píxeles, ese elemento ocupará mucho espacio vertical en el navegador. Por ejemplo, un párrafo con una
altura: 100px;
ocupará 100 píxeles de espacio vertical en su diseño. No importa qué tan grande sea la ventana de su navegador, este elemento tendrá 100 píxeles de altura. Los porcentajes funcionan de manera diferente a los píxeles. De acuerdo con la especificación W3C, las alturas porcentuales se calculan con respecto a la altura del contenedor. Así que si pones un párrafo con una altura: 50%;
Dentro de un div con una altura de 100 px, el párrafo tendrá 50 píxeles de altura, que es el 50% de su elemento principal. Si está diseñando una página web y tiene una columna que le gustaría ocupar toda la altura de la ventana, la inclinación natural es agregar un altura: 100%;
a ese elemento. Después de todo, si configura el anchura
a ancho: 100%;
El elemento ocupará todo el espacio horizontal de la página, por lo que altura
debería funcionar igual, ¿verdad? Desafortunadamente, este no es el caso en absoluto. Para comprender por qué sucede esto, debe comprender cómo los navegadores interpretan altura y anchura. Los navegadores web calculan el ancho total disponible en función de la amplitud con la que se abre la ventana del navegador. anchura
Si no establece ningún valor en sus documentos, el navegador automáticamente fluirá el contenido para llenar todo el ancho de la ventana (el 100% del ancho es el valor predeterminado). El valor de altura se calcula de forma diferente al ancho. De hecho, los navegadores no evalúan la altura en absoluto a menos que el contenido sea tan largo que salga de la ventana gráfica (lo que requiere barras de desplazamiento) o si el diseñador web establece un absoluto para un elemento en la página. altura
De lo contrario, el navegador simplemente deja que el contenido fluya dentro del ancho de la ventana gráfica hasta que llegue al final. La altura no se calcula en absoluto. Los problemas ocurren cuando establece una altura porcentual en un elemento que tiene elementos primarios sin alturas establecidas; en otras palabras, los elementos primarios tienen un valor predeterminado. altura: auto;
En efecto, le está pidiendo al navegador que calcule una altura a partir de un valor no definido. Dado que eso equivaldría a un valor nulo, el resultado es que el navegador no hace nada. Si desea establecer un alto en sus páginas web en un porcentaje, debe establecer el alto de cada Elemento padre del que desea que se defina la altura. En otras palabras, si tienes una página como esta: Contenido aqui
Es probable que desee la div
y el párrafo en él para tener una altura del 100%, pero que div realmente tiene dos elementos padres: y. Para definir la altura de la div
a una altura relativa, debe establecer la altura de la cuerpo
y html
elementos también. Así que necesitarías usar CSS para establecer la altura no solo de la división sino también del cuerpo y los elementos HTML. Esto puede ser un desafío, ya que puede abrumarse rápidamente con todo lo que se establece en 100% de altura, solo para lograr el efecto deseado. Ahora que sabe cómo configurar el alto de los elementos de su página al 100%, puede ser emocionante salir y hacer eso en todas sus páginas, pero hay algunas cosas que debe tener en cuenta: Para solucionar esto, también puede establecer la altura del elemento. Si lo pones a auto,
Las barras de desplazamiento aparecerán si son necesarias, pero desaparecerán cuando no lo sean.Eso corrige el salto visual, pero agrega barras de desplazamiento donde es posible que no las quiera. Otra forma de enfrentar este desafío es experimentar con las unidades CSS Viewport. Al utilizar la unidad de medida de altura de ventana gráfica, puede ajustar el tamaño de los elementos para ocupar una altura definida de la ventana gráfica, y eso cambiará a medida que la ventana gráfica cambie. Esta es una excelente manera de obtener imágenes del 100% de altura en una página, pero aún así debe ser flexible para diferentes dispositivos y tamaños de pantalla. Por qué fracasan las alturas porcentuales
Algunas cosas a tener en cuenta cuando se trabaja con 100% de altura
Usando Unidades Viewport
