resto - html div altura

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

Question

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

Intenté ajustar la 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.

Answer 1

Aquí:

html,body{
    height:100%;
}

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

Answer 2

CSS3 tiene un nuevo método.

 height:100vh

Hace que ViewPort 100% sea igual a la altura.

Así que tu código debería ser

 body{
 height:100vh; 
 }

Answer 3

Como alternativa a la configuración de las alturas del elemento html y del body en 100% , también puede utilizar longitudes de porcentaje de vista.

5.1.2. Longitud de porcentaje de vista: las unidades ''vw'', ''vh'', ''vmin'', ''vmax''

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

En este caso, puede utilizar el valor 100vh , que es la altura de la ventana 100vh .

Ejemplo aquí

body {
    height: 100vh;
}

body {
    min-height: 100vh;
}

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

Answer 4

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 se desbordan sus contenidos. 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 de la 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 se desplaza, observe el fondo que se repite? Esto está sucediendo porque la altura del elemento del cuerpo NO ha aumentado debido a que la tabla secundaria se desborda. ¿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 tabla o división secundaria tome una altura porcentual como se muestra aquí:

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

Espero que esto ayude a alguien. Creo que los navegadores están manejando esto incorrectamente. Yo esperaría que la altura del cuerpo se ajustara automáticamente a mayor tamaño si sus hijos se desbordaran. Sin embargo, eso no parece suceder cuando usas 100% de altura y 100% de ancho.

Answer 5

Intenta agregar:

body {
height: 100vh;
}

Answer 6

Lo que uso al comienzo de literalmente cada archivo CSS que uso es lo 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 en el navegador para tener un espacio a la izquierda o derecha de ellos.

El relleno de 0 garantiza 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 se establecen en 100% para garantizar que el navegador no las redimensione en previsión de tener realmente un margen o relleno automático, con mínimos y máximos establecidos en caso de que ocurran cosas extrañas e inexplicables, aunque Probablemente no los necesites.

Esta solución también significa que, como hice cuando empecé con HTML y CSS hace varios años, no tendrá que darle un margin:-8px; a su primer <div> 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 era solo body{margin:0;} y nada más, 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.

Answer 7

Por favor, chequee esto:

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

O pruebe el nuevo método de altura de la 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 vendrá a la altura máxima de la pantalla.

Answer 8

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

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

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

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

Answer 9

Si no desea editar su propio archivo CSS y definir las reglas de altura por sí mismo, los marcos CSS más típicos también resuelven este problema con el elemento del cuerpo que llena la totalidad de la página, entre otros, a gusto con múltiples Tamaños de ventanillas.

Por ejemplo, Tacit CSS framework resuelve este problema de forma inmediata, donde no necesita definir ninguna clase ni reglas de CSS y solo debe incluir el archivo CSS en su HTML.

Answer 10

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 es más alto que la ventana gráfica y que la imagen de fondo continúa repitiéndose / desplazándose / lo que sea cuando comience a desplazarse hacia abajo.

Recuerde que si tiene que soportar IE6, tendrá que encontrar una forma de encajar en height:100% para el cuerpo, IE6 trata la height como min-height todos modos.

Answer 11

Sobre el espacio adicional en la parte inferior: ¿es su página una aplicación ASP.NET? Si es así, probablemente haya un envoltorio casi todo en su marca. No te olvides de diseñar la forma también. Adición de overflow:hidden; a la forma podría eliminar el espacio extra en la parte inferior.

Answer 12

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

body{ height: 100vh; }

Answer 13

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

Answer 14

Todas las respuestas son 100% correctas y están bien explicadas, pero hice algo bueno y muy simple para que sea receptivo.

aquí, el elemento tomará el 100% 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 la vista se hace más pequeño, el elemento colapsará y se superpondrá entre sí. así que para que sea poco sensible aquí es código. Espero que alguien reciba 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.

Answer 15

Tratar

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

Answer 16

Trate de establecer la altura del elemento html en 100% también.

html, 
body {
    height: 100%;
}

El cuerpo mira a su padre (HTML) para ver 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 en 100% logrará este objetivo.

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

Answer 17

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

Answer 18

Aquí actualización

html
  {
    height:100%;
  }

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

Answer 19

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

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

Answer 20

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 +. Funciona con imágenes de fondo y degradados. Las barras de desplazamiento están disponibles como necesidades de contenido.

Answer 21

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