Hacer 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é configurar 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 barra blanca fea en la parte inferior.

Intente configurar la altura del elemento html al 100% también.

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 su altura establecida.

Sin embargo, el contenido del cuerpo probablemente tendrá que cambiar dinámicamente. Establecer la altura mínima al 100% logrará este objetivo.

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

Como alternativa a establecer las alturas de los elementos htmly , también puede usar 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 de porcentaje de 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 usar 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í .

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

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

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

Recuerde que si tiene que admitir IE6, necesitará encontrar una manera de adaptarse height:100%al cuerpo, IE6 se trata heightcomo de min-heighttodos modos.

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; }

La configuración body {min-height:100%} le dará barras de desplazamiento.

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

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

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 en el que las htmly los bodyelementos se expandirán automáticamente si su contenido de desbordamiento. Probé esto en la última versión de Firefox, Chrome e IE 11.

Vea el violín completo aquí (para los que odian la mesa, siempre puede 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/

A medida que te desplazas, ¿notas el fondo que se repite? Esto sucede porque la altura del elemento del cuerpo NO ha aumentado debido al desbordamiento de su tabla secundaria. ¿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 del 100% en el cuerpo como se muestra arriba causa otros problemas. Si hace esto, no puede especificar que una división o tabla secundaria ocupe un porcentaje de altura 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 cada vez más si sus hijos se desbordan. Sin embargo, eso no parece suceder cuando usa 100% de altura y 100% de ancho.

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 asegura que los elementos HTML y BODY no sean posicionados automáticamente por el navegador para tener espacio a la izquierda o derecha de ellos.

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

Las variantes de ancho y alto están configuradas al 100% para garantizar que el navegador no las redimensione en anticipación de tener un margen o relleno autoestablecidos, con mínimo y máximo configurados en caso de que ocurran cosas extrañas e inexplicables, aunque usted 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>a margin:-8px;para que encaje en la esquina de la ventana del navegador.

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

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

Una actualización rápida

html, body{
    min-height:100%;
    overflow:auto;
}

Una mejor solución con el CSS de hoy

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

Aquí:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

También puede usar JS si es necesario

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

Tratar

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

Por favor, chequee esto:

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

O pruebe el nuevo método Altura de ventana gráfica:

html, body { width: 100vw; height: 100vh;}

Ventana gráfica: si usa la ventana gráfica, significa que el tamaño del contenido de la pantalla tendrá toda la altura de la pantalla.

Si no desea el trabajo de editar su propio archivo CSS y definir las reglas de altura usted mismo, los marcos CSS más típicos también resuelven este problema con el elemento del cuerpo llenando la totalidad de la página, entre otros problemas, con facilidad con múltiples tamaños de ventanas gráficas.

Por ejemplo, el marco Tacit CSS resuelve este problema fuera de la caja, en el que no necesita definir ninguna regla y clase CSS y solo incluye el archivo CSS en su HTML.

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

Funciona para todos los principales navegadores: FF, Chrome, Opera, IE9 +. Trabaja con imágenes de fondo y gradientes. Las barras de desplazamiento están disponibles según las necesidades de contenido.

Yo usaria esto

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }

<html>
    <body>
    </body>
</html>

El navegador usará min-height: 100vhy si de alguna manera el navegador es un poco más viejo min-height: 100%, será la alternativa.

Esto overflow: autoes necesario si desea que el cuerpo y el html expandan su altura cuando cambie el tamaño de la pantalla (por ejemplo, a un tamaño móvil)

Solo con 1 línea de CSS ... Puede hacer esto.

body{ height: 100vh; }

todas las respuestas son 100% correctas y bien explicadas, pero hice algo bueno y muy simple para que respondiera.

aquí el elemento ocupará el 100% de la altura del puerto de vista, pero cuando se trata de la vista móvil, no se ve bien, especialmente en la vista vertical (móvil), por lo que cuando el puerto de vista se hace más pequeño, el elemento colapsará y se superpondrá entre sí. así que para que sea poco sensible aquí hay código. Espero que alguien obtenga ayuda de esto.

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

Aquí está JSfiddle Demo.

Aquí actualiza

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

Sobre el espacio extra en la parte inferior: ¿es su página una aplicación ASP.NET? Si es así, probablemente haya una envoltura de casi todo en su marcado. No olvides diseñar el formulario también. Agregar overflow:hidden;al formulario puede eliminar el espacio adicional en la parte inferior.

@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

CSS3 tiene un nuevo método.

 height:100vh

Hace que ViewPort sea 100% igual a la altura.

Entonces su Código debería ser

 body{
 height:100vh; 
 }