Pregunta Haz que el cuerpo tenga el 100% de la altura del navegador


Quiero hacer que el cuerpo tenga el 100% de la altura del navegador. ¿Puedo hacer eso usando CSS?

Intenté establecer height: 100%, pero no funciona.

Quiero establecer un color de fondo para que una página ocupe toda la ventana del navegador, pero si la página tiene poco contenido, aparece una fea barra blanca en la parte inferior.


617
2017-07-11 18:50


origen


Respuestas:


Intenta establecer la altura del elemento html al 100% también.

html, 
body {
    height: 100%;
}

El cuerpo busca a su padre (HTML) la forma de escalar la propiedad dinámica, por lo que el elemento HTML también debe tener su altura establecida.

Sin embargo, el contenido del cuerpo probablemente tendrá que cambiar dinámicamente. Establecer min-height al 100% logrará este objetivo.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

820
2017-07-11 18:53



Como alternativa a establecer tanto el html y body alturas del elemento a 100%, también puedes usar longitudes de porcentaje de ventana.

5.1.2. Longitudes de porcentaje de la ventana gráfica: las unidades 'vw', 'vh', 'vmin', 'vmax'

Las longitudes de porcentaje de ventana gráfica son relativas al tamaño del bloque que contiene inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se ajustan en consecuencia.

En este caso, podrías usar el valor 100vh - que es el alto de la ventana gráfica.

Ejemplo aquí

body {
    height: 100vh;
}
body {
    min-height: 100vh;
}

Esto es compatible con la mayoría de los navegadores modernos: soporte se puede encontrar aquí.


143
2017-09-14 03:39



Si tiene una imagen de fondo, querrá configurar esto en su lugar:

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Esto garantiza que la etiqueta de su cuerpo pueda seguir creciendo cuando el contenido sea más alto que la ventana gráfica y que la imagen de fondo continúe repitiendo / desplazándose / lo que sea cuando empiece a desplazarse hacia abajo.

Recuerda que si tienes que soportar IE6 necesitarás encontrar una forma de encajar height:100% para el cuerpo, IE6 trata height me gusta min-height de todas formas.


113
2017-11-01 06:55



Si desea mantener los márgenes en el cuerpo y no desea barras de desplazamiento, use el siguiente CSS:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

Ajuste body {min-height:100%}  te dará barras de desplazamiento.

Ver demostración en http://jsbin.com/aCaDahEK/2/edit?html,output .


62
2017-12-01 08:24



html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}

25
2017-07-11 18:54



Lo que uso al comienzo de literalmente cada archivo CSS que uso es el siguiente:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

El margen de 0 garantiza que los elementos HTML y BODY no se posicionen automáticamente por el navegador para tener espacio a la izquierda o derecha de ellos.

El relleno de 0 garantiza que los elementos HTML y BODY no empujen automáticamente hacia abajo o hacia la derecha todo lo contenido en ellos debido a los valores predeterminados del navegador.

Las variantes de ancho y alto están configuradas en un 100% para garantizar que el navegador no las cambie de tamaño en anticipación de tener un margen o relleno automático, con mín. Y máx. Establecidos en caso de que suceda algo extraño e inexplicable, aunque probablemente no los necesite.

Esta solución también significa que, como lo hice cuando comencé a usar HTML y CSS hace varios años, no tendrá que dar su primer <div> un margin:-8px; para que quepa en la esquina de la ventana del navegador.


Antes de publicar, miré mi otro proyecto de CSS de pantalla completa y descubrí que todo lo que usaba era simplemente body{margin:0;}y nada más, lo que ha funcionado bien durante los 2 años que he estado trabajando en ello.

Espero que esta respuesta detallada ayude, y siento tu dolor. En mi opinión, es tonto que los navegadores establezcan un límite invisible a la izquierda y, en ocasiones, a la parte superior de los elementos body / html.


18
2017-10-28 02:32



Después de probar varios escenarios, creo que esta es la mejor solución:

html {
    width:100%;
    height: 100%;
    display: table;
}

body {
    width:100%;
    display:table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

Es dinámico porque el html y el elemento del cuerpo se expandirán automáticamente si su contenido se desborda. Probé esto en la última versión de Firefox, Chrome e IE 11.

Mira el violín completo aquí (para los que odian la mesa, siempre puedes cambiarlo para usar un div):

https://jsfiddle.net/71yp4rh1/9/


Dicho esto, hay varios problemas con las respuestas publicadas aquí.

html, body {
    height: 100%;
}

El uso del CSS anterior hará que el html y el elemento del cuerpo NO se expandan automáticamente si su contenido se desborda como se muestra aquí:

https://jsfiddle.net/9vyy620m/4/

Mientras te desplazas, ¿notas el fondo que se repite? Esto está sucediendo porque la altura del elemento del cuerpo NO ha aumentado debido a la sobrecarga de su tabla hija. ¿Por qué no se expande como cualquier otro elemento de bloque? No estoy seguro. Creo que los navegadores manejan esto incorrectamente.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Establecer una altura mínima de 100% en el cuerpo como se muestra arriba causa otros problemas. Si hace esto, no puede especificar que una div o tabla hija ocupe un alto de porcentaje como se muestra aquí:

https://jsfiddle.net/aq74v2v7/4/

Espero que esto ayude a alguien. Creo que los navegadores están manejando esto incorrectamente. Esperaría que la altura del cuerpo se ajuste automáticamente creciendo más grande si sus niños se desbordan. Sin embargo, eso no parece suceder cuando utilizas 100% de altura y 100% de ancho.


16
2017-08-12 00:58