Hacer que el cuerpo tenga el 100% de la altura del navegador
Quiero que bodytenga el 100% de la altura del navegador. ¿Puedo hacer eso usando CSS?
Intenté configurarlo height: 100%, pero no funciona.
Quiero establecer un color de fondo para que una página llene toda la ventana del navegador, pero si la página tiene poco contenido aparece una fea barra blanca en la parte inferior.
Intente establecer también la altura del elemento html al 100%.
html,
body {
height: 100%;
}
El cuerpo busca en su padre (HTML) cómo escalar la propiedad dinámica, por lo que el elemento HTML también debe tener establecida su altura.
Sin embargo, el contenido del cuerpo probablemente tendrá que cambiar dinámicamente. Establecer min-height en 100% logrará este objetivo.
html {
height: 100%;
}
body {
min-height: 100%;
}
Como alternativa a establecer las alturas del elemento htmly en , también puede utilizar longitudes de porcentaje de ventana gráfica.body100%
5.1.2. Longitudes de porcentaje de ventana gráfica: las unidades 'vw', 'vh', 'vmin', 'vmax'
Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque contenedor inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se escalan en consecuencia.
En este caso, podría utilizar el valor 100vh, que es la altura de la ventana gráfica.
Ejemplo aquí
body {
height: 100vh;
padding: 0;
}
body {
min-height: 100vh;
padding: 0;
}
Esto es compatible con la mayoría de los navegadores modernos; puede encontrar soporte aquí .
