Hacer que el cuerpo tenga el 100% de la altura del navegador


845

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.


Respuestas:


1092

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

66
gracias, esto parece eliminar la barra blanca en páginas cortas, pero ahora en páginas cuya altura excede la altura de la ventana del navegador obtengo una barra blanca de 20 píxeles en la parte inferior: |
bodyofheat

48
ok lo descubri! funciona si agrego html, body {min-height: 100%;}: D
bodyofheat

12
Nota: si usa la body {min-height}versión, entonces no puede usar el .body-child{height: 100%}truco.
Salman A

14
la mejor respuesta es con CSS3, usando vh-> body { height: 100vh }- marque la respuesta aquí stackoverflow.com/a/25829844/2680216
Adriano Resende

2
@bFunc Tengo este problema de Chrome. html {height: 100%;} body {height: auto} hace el trabajo.
GBMan

217

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í .


44
Además del hecho de que esto es muy simple, también es bueno que adoptemos nuevas prácticas.
Pan Wangperawong

3
@niaster definitivamente estoy de acuerdo. El soporte del navegador ya ha mejorado desde que publiqué esta respuesta también :)
Josh Crozier

1
@incarnate Sí ... lástima que no lo sea :) Parece que la última vez que el OP estuvo en línea fue el 7/11/11 (la fecha en que se hizo la pregunta ...) Así que dudo que eso cambie.
Josh Crozier

18
No estoy seguro de por qué debemos comenzar a "adoptar nuevas prácticas" cuando la práctica anterior funciona bien. Hacer esto no tiene ninguna ventaja: el código no es más pequeño, ni funciona mejor, y todavía hay navegadores que no admiten vw / vh.
cimmanon

3
La hoja de estilo de agente de usuario de Chrome agrega un margen de 8px al cuerpo de forma predeterminada (no estoy seguro acerca de otros navegadores), por lo que también tuve que agregar margin: 0;para evitar una barra de desplazamiento vertical persistente a la derecha.
Andy Raddatz

121

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.


También funciona cuando hay un flexbox global justo debajo del cuerpo (body> # flexbox-wrapper)
justnorris

2
Esta es la respuesta correcta, ya que la respuesta aceptada no crecerá a medida que el contenido se alargue más que una sola pantalla.
SimplGy

Muchas gracias, Angry Dan, ¡ese feo espacio blanco en la parte inferior de mi sitio se ha ido!
Boris Burkov,

Por supuesto, desde que se planteó esta pregunta, las dimensiones basadas en el puerto de visualización se convirtieron en una Cosa. Así que ahora puedes hacerlobody{min-height: 100vh}
Angry Dan

También necesita body { height: auto; }que las barras de desplazamiento no se muestren en Firefox. Aparte de eso, funciona perfectamente.
Torxed

82

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 .


77
Gracias por la única respuesta que funciona :) Supongo que 'absoluto' lo hizo funcionar
Dmitry Matveev

Me funciona bien en Firefox sin barras de desplazamiento, gracias. La respuesta aceptada no.
Andrew

@ Andrew Curiosamente, esto proporciona barras de desplazamiento en Firefox. Sin embargo, lo que necesita para la respuesta aceptada también está height: auto;en la bodycláusula para que ahora aparezcan barras de desplazamiento.
Torxed

@Torxed Todavía obtengo barras de desplazamiento en Firefox con esto también. Agregar la configuración automática a la altura no pareció funcionar para mí :(
Travis Crum

Esto no funcionó para mí en Chrome 56.0.2924.87 (64 bits).
Ryan

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

24

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.


3
Intenté todas las respuestas de alta votación en esta página, pero ninguna funcionó. Este lo hizo!
Ryan

Esta respuesta debe ser la aceptada. El height: 100vhtampoco es una solución. Configurar su contenedor superior para que sea 100vhalto y 100vwpodría causar problemas si el contenedor tiene barras de desplazamiento, entonces será más grande de lo que debería ser (y podría hacer que las barras de desplazamiento sean visibles innecesariamente). Esto height: 100vhtambién nos causó problemas en los dispositivos Android más nuevos (por ejemplo, Xiaomi Mi 9 con Android 9), donde el contenedor sería más grande que la pantalla misma y haría una barra de desplazamiento vertical innecesaria al cuerpo del documento.
jtompl

21

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.


¿Podría explicar, por favor, cuál es el posible propósito de los width: 100%elementos body y html? Sí, entiendo que desde el punto de vista práctico, body { margin: 0; }debería ser suficiente en la mayoría de los casos. Solo quiero entender más a fondo.
john cj

21

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

2
¿Cómo ofrece esto algo diferente sobre las respuestas existentes?
cimmanon

3
También he probado otros, pero no funcionó para mí. Este funcionó, por lo que puede ser una solución para alguien necesitado. @cimmanon
Jayant Varshney

Tengo que decir que esta funciona para mí además de otras respuestas de alto voto. overflow: autoAquí haz la magia. Por cierto, uso Chrome.
SkuraZZ

La única opción (que he encontrado) que permite que el contenido desbordado cambie el tamaño de la altura.
Daniel Sharp

6

Aquí:

html,body{
    height:100%;
}

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

4

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

Pero para esto necesita agregar más cosas de las necesarias, como la biblioteca jQuery y escribir en JavaScript, mientras que esto se puede hacer en CSS.
Desarrollador front-end

3

Tratar

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

2
¿Podría explicar, por favor, cuál es el posible propósito de los width: 100%elementos body y html? Sí, entiendo que desde el punto de vista práctico, body { margin: 0; }debería ser suficiente en la mayoría de los casos. Solo quiero entender más a fondo.
john cj

3

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.


Incluya una explicación de su solución para que otros que encuentren esta respuesta puedan entender. ¡Gracias!
Shawn

¿Podría explicar, por favor, cuál es el posible propósito de los width: 100%elementos body y html?
john cj

digamos que tengo una tabla con 50 columnas y 1000 filas con números entre 1000 y 9999, lo que les sucederá, se desplazarán más allá de la ventana como lo hacemos normalmente o tendrán una barra de desplazamiento de tipo desbordamiento
PirateApp

3

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.


2
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.


2

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)



1

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.


0

Aquí actualiza

html
  {
    height:100%;
  }

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

-1

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.


66
No recomiendo usar overflow: oculto a menos que tenga una buena razón. Descubre por qué las cosas se desbordan y ajustar para que no se desborde lugar
jontro

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

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

¿Podría explicar, por favor, cuál es el posible propósito de los width: 100%elementos body y html? Sí, entiendo que desde el punto de vista práctico, body { margin: 0; }debería ser suficiente en la mayoría de los casos. Solo quiero entender más a fondo.
john cj

-5

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

55
¿En qué se diferencia esto de la respuesta que publiqué hace un año en septiembre?
Josh Crozier

1
¿Por qué respondes doblemente?
Adriano Resende
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.