Cómo hacer un div 100% de altura de la ventana del navegador

2388

Tengo un diseño con dos columnas: una izquierda divy otra derecha div.

La derecha divtiene un color gris background-colory necesito que se expanda verticalmente dependiendo de la altura de la ventana del navegador del usuario. Ahora mismo background-colortermina en el último contenido de eso div.

He intentado height:100%, min-height:100%;, etc.

5
3064

Hay un par de unidades de medida CSS 3 llamadas:

Viewport-Porcentaje (o Viewport-Relativa) Longitudes

¿Qué son las longitudes de porcentaje de ventana gráfica?

De la recomendación del candidato de W3 vinculada anteriormente:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Estas unidades son vh(altura de la ventana gráfica), vw(ancho de la ventana gráfica), vmin(longitud mínima de la ventana gráfica) y vmax(longitud máxima de la ventana gráfica).

¿Cómo se puede usar esto para hacer que un divisor llene la altura del navegador?

Para esta pregunta, podemos hacer uso de vh: 1vhes igual al 1% de la altura de la ventana gráfica. Es decir, 100vhes igual a la altura de la ventana del navegador, independientemente de dónde se encuentre el elemento en el árbol DOM:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Esto es literalmente todo lo que se necesita. Aquí hay un ejemplo de JSFiddle de esto en uso.

¿Qué navegadores admiten estas nuevas unidades?

Actualmente, esto es compatible con todos los principales navegadores actualizados, excepto Opera Mini. Consulte ¿Puedo usar ... para obtener más ayuda?

¿Cómo se puede utilizar esto con varias columnas?

En el caso de la pregunta que nos ocupa, con un divisor izquierdo y derecho, aquí hay un ejemplo de JSFiddle que muestra un diseño de dos columnas que involucra tanto vhy vw.

¿En qué se 100vhdiferencia de 100%?

Tome este diseño, por ejemplo:

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

La petiqueta aquí se establece en 100% de altura, pero debido a que su contenido divtiene 200 píxeles de altura, el 100% de 200 píxeles se convierte en 200 píxeles, no el 100% de la bodyaltura. Usar en su 100vhlugar significa que la petiqueta tendrá el 100% de la altura bodyindependientemente de la divaltura. ¡Eche un vistazo a este JSFiddle adjunto para ver fácilmente la diferencia!

18
  • 45
    Comportamiento extraño con el desplazamiento cuando el elemento es en realidad más alto que la ventana gráfica. El contenedor mantiene la altura de la ventana gráfica y el contenido fluye fuera del contenedor. min-height:100vhparece solucionar esto.
    wdm
    18 de agosto de 2013 a las 9:07
  • 1
    @DGDD siguiendo: hay muchas otras soluciones aquí que funcionan desde IE5, por lo que no era necesario que repitiera lo que otros ya han dicho. Esta respuesta es lo suficientemente sólida para la mayoría de los navegadores lanzados en los últimos 3 años desde que se introdujo por primera vez la especificación. 4 de julio de 2014 a las 15:49
  • 9
    @DGDD esto funciona en iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 e IEMobile 10.0. No sé a qué navegador móvil se está refiriendo, pero esos 4 constituyen más del 90% de los navegadores móviles utilizados. Esta pregunta no especifica un requisito para trabajar en navegadores móviles. 4 de julio de 2014 a las 15:56
  • 1
    @ robross0606 nuevamente, esa no es la pregunta que he respondido aquí. Esa es una pregunta completamente diferente, cuya respuesta de hecho usa flexbox: stackoverflow.com/questions/90178/… 6 de mayo de 2015 a las 21:14
  • 5
    Alerta móvil: uso de vh mess con Chrome mobile que no tiene en cuenta su barra de navegación. Luego cubre la parte superior de la página con él. Un problema grave si tienes un menú allí ...
    Offirmo
    22/02/18 a las 6:46
592

Si desea establecer la altura de uno <div>o cualquier elemento, también debe establecer la altura de <body>y <html>al 100%. Luego puede establecer la altura del elemento con 100% :)

Aquí hay un ejemplo:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
5
  • 119
    Corrígeme si me equivoco, pero creo que también necesitas establecer la altura para todos los padres del div, para que realmente funcione
    Dany Y
    28 de marzo de 2013 a las 11:05
  • Esto no funcionará si estoy usando un diseño continuo: altura de la página 6000px, con bloques que representan las páginas. Quiero que un bloque tenga exactamente la altura de la ventana gráfica.
    Qwerty
    21 dic '13 a las 20:31
  • @DanyY, tienes razón. Necesita establecer la altura para todos los padres del div, con las implicaciones de que todo tenga la altura de la pantalla. He aquí un ejemplo . 2 de enero de 2014 a las 7:31
  • Este truco funciona para algunos casos, pero no lo haría en algunos casos también. Si busca compatibilidad o una forma más recomendada, puede ver la respuesta de @ James arriba :) Usando el método de porcentaje de la ventana gráfica :), eso también debería funcionar. salud 19 feb 2014 a las 6:00
  • 8
    @Qwerty, aquí está la solución. Css Establecer como así: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Entonces, si tiene 3 secciones, seráhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% } 12 mar 14 a las 11:55
296

Si puede colocar absolutamente sus elementos,

position: absolute;
top: 0;
bottom: 0;

Lo haría.

2
  • 19
    Esto funciona sacando el elemento del flujo de documentos y cementando su valor inferior a la altura de su padre. Esto no es ideal cuando su contenido excede la altura de su principal. 18 de diciembre de 2014 a las 4:23
  • 2
    Eso no funciona cuando uno de sus padres está configurado en position:relativey su altura no es el 100% de la ventana gráfica. Se ajustará arriba y abajo a su próximo antepasado relativo o absoluto.
    Seika85
    1 de julio de 2016 a las 14:39
146

Puede utilizar la unidad de puerto de visualización en CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
2
  • 2
    @Lamar Debes usar * { box-sizing: border-box; }para evitar que eso suceda. 22 de enero de 2017 a las 20:01
  • 2
    Vale la pena consultar caniuse para conocer la compatibilidad del navegador en las unidades de visualización: caniuse.com/#feat=viewport-units 15/02/2017 a las 17:32
141

Puede usar vhen este caso que es relativo al 1% de la altura de la ventana gráfica ...

Eso significa que si desea cubrir la altura, simplemente use 100vh.

Mira la imagen de abajo que te dibujo aquí:

¿Cómo hacer un div 100% de altura de la ventana del navegador?

Pruebe el fragmento que creé para usted de la siguiente manera:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>
4
  • 2
    Dar 100vh agregó un desplazamiento vertical para la página, así que seguí este pero no funcionó. stackoverflow.com/questions/44645465/… . ¿Hay alguna forma de evitar el desplazamiento vertical y hacer que el div toque la parte inferior sin ningún contenido?
    Learner
    19/11/19 a las 5:57
  • @DILEEPTHOMAS busca existente paddings/margins
    Legends
    12/12/19 a las 15:41
  • @Legends en el archivo raíz que intenté dar como * {margin: 0, padding: 0} pero no funcionó
    Learner
    13/12/19 a las 6:44
  • 2
    @DILEEPTHOMAS mira este ejemplo aquí proporcionado por Alireza, también tiene una barra de desplazamiento porque el elemento del cuerpo tiene un margen. Si elimina el margen, la barra de desplazamiento desaparece. Puede tener diferentes causas, pero esta sería la primera en verificar.
    Legends
    13/12/19 a las 8:35
114

Todas las demás soluciones, incluida la más votada, vhson subóptimas en comparación con la solución del modelo flexible .

Con la llegada del modelo CSS flex , resolver el problema del 100% de altura se vuelve muy, muy fácil: se usa height: 100%; display: flexen los elementos principales y flex: 1secundarios. Automáticamente ocuparán todo el espacio disponible en su contenedor.

Tenga en cuenta lo simples que son el marcado y el CSS. Sin trucos de mesa ni nada.

El modelo flexible es compatible con todos los navegadores principales , así como con IE11 +.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

Obtenga más información sobre el modelo flexible aquí.

3
  • 4
    Una advertencia: cuando el contenido de uno de los contenedores izquierdo / derecho excede la altura del cuerpo original, el contenedor opuesto no cambiará de tamaño, por lo que los contenedores terminan con alturas diferentes. 14/12/15 a las 7:55
  • 1
    Ejemplo del problema que señala Schellmax: jsfiddle.net/Arete/b4g0o3pq
    Arete
    12 de septiembre de 2016 a las 20:15
  • Dependiendo del diseño, se overflow-y: auto;pueden evitar "contenedores que superen la altura de la carrocería original". 8 de septiembre de 2018 a las 8:54
54

No mencionas algunos detalles importantes como:

  • ¿El diseño tiene un ancho fijo?
  • ¿Alguna o ambas columnas tienen un ancho fijo?

Aquí hay una posibilidad:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Hay muchas variaciones en esto dependiendo de qué columnas deben fijarse y cuáles son líquidas. También puede hacer esto con posicionamiento absoluto, pero generalmente he encontrado mejores resultados (particularmente en términos de navegadores cruzados) usando flotadores en su lugar.

0
36

Esto es lo que funcionó para mí:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

Úselo en position:fixedlugar de position:absolute, de esa manera, incluso si se desplaza hacia abajo, la división se expandirá hasta el final de la pantalla.

1
  • Este código con la "posición: [fijo | absoluto]" es ideal para los fondos de las ventanas emergentes (como cuando haces clic para hacer zoom en una imagen) pero no tan seguro en los casos en los que necesitas desplazarte hacia abajo. ¡Todavía masa útil! 24 feb 2020 a las 11:23
30

Aquí hay una solución para la altura.

En su uso de CSS:

#your-object: height: 100vh;

Para el navegador que no es compatible vh-units, use modernizr.

Agregar este script (para agregar detección vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

Finalmente, use esta función para agregar la altura de la ventana gráfica #your-objectsi el navegador no admite vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});
29

Incluso con todas las respuestas aquí, me sorprendió descubrir que ninguna realmente resolvió el problema. Si usé 100vh height/ min-height, el diseño se rompió cuando el contenido era más largo que una página. Si en cambio usé 100% height/ min-height, el diseño se rompió cuando el contenido era menor que la altura de la página.

La solución que encontré, que resolvió ambos casos, fue combinar las dos respuestas principales:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}
1
  • 2
    Tengo una barra de navegación de 90px de altura fija, así que tuve que cambiar tu "100vh" a "calc (100vh - 90px)" 27 mar.20 a las 4:17
25

100% funciona de manera diferente para el ancho y la altura.

Cuando lo especifica width: 100%, significa "tomar el 100% del ancho disponible del elemento principal o del ancho de la ventana".

Cuando lo especifica height: 100%, solo significa "tomar el 100% de la altura disponible del elemento principal". Esto significa que si no especifica una altura en un elemento de nivel superior, la altura de todos los hijos será la 0altura del padre o la altura del padre, y es por eso que debe configurar el elemento superior para que tenga una min-heightaltura de ventana.

Siempre especifico que el cuerpo tenga una altura mínima de 100vh y facilita el posicionamiento y los cálculos,

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

Prueba esto - probado:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

Edición: actualización 2020:

Puedes usar vhahora:

#right, #left {
  height: 100vh
}
25

100vw = 100% del ancho de la ventana gráfica.

100vh = 100% de la altura de la ventana gráfica.

Si desea establecer el divancho o la altura al 100% del tamaño de la ventana del navegador, debe usar:

Para ancho: 100vw

Por altura: 100vh

O si desea establecer un tamaño más pequeño, use la calcfunción CSS . Ejemplo:

#example {
    width: calc(100vw - 32px)
}
0
16

Agregue min-height: 100%y no especifique una altura (o póngala en automático). Hizo el trabajo totalmente por mí:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
0
16

La forma más sencilla es hacerlo así.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}
<div></div>
15

Una página completa se denomina 'ventana gráfica' y puede diseñar un elemento de acuerdo con su ventana gráfica en CSS3.

Estas unidades se denominan longitudes de porcentaje de ventana gráfica y son relativas al tamaño del bloque contenedor inicial.

  • Se llama Viewport-Height vh. La altura completa de una página es 100vh.
  • Se llama Viewport-Width vw. La altura completa de una página es 100vw.
  • También existen vmin (longitud mínima de la ventana gráfica) y vmax (longitud máxima de la ventana gráfica).

Entonces, su problema puede resolverse fácilmente agregando lo siguiente a su CSS:

.classname-for-right-div /*You could also use an ID*/ { 
  height: 100vh;
}

Aquí hay información sobre las longitudes relativas de la ventana gráfica

12

Hay varios métodos disponibles para establecer la altura de a <div>al 100%.

Método (A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>

Método (B) usando vh:

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>

Método (c) usando caja flexible:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>
12

Esto funcionó para mí:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

Tomado de esta página .

11

Trate de establecer height:100%en html&body

html, 
body {
    height: 100%;
}

Y si desea 2 div de altura, use o establezca la display:flexpropiedad del elemento principal .

8

Los elementos de bloque consumen el ancho completo de su padre, de forma predeterminada.

Así es como cumplen con su requisito de diseño, que es apilarse verticalmente.

9.4.1 Block formatting contexts

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

Sin embargo, este comportamiento no se extiende a la altura.

De forma predeterminada, la mayoría de los elementos tienen la altura de su contenido ( height: auto).

A diferencia del ancho, debe especificar una altura si desea espacio adicional.

Por lo tanto, tenga en cuenta estas dos cosas:

  • a menos que desee el ancho completo, debe definir el ancho de un elemento de bloque
  • a menos que desee la altura del contenido, debe definir la altura de un elemento

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>
0
8

Simplemente use la unidad "vh" en lugar de "px", lo que significa altura del puerto de visualización.

height: 100vh;
8

Aquí hay algo que no es exactamente como lo que tenía en las respuestas anteriores, pero podría ser útil para algunos:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

7

Una de las opciones es usar la tabla CSS. Tiene un gran soporte de navegador e incluso funciona en Internet Explorer 8.

Ejemplo de JSFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
7

Try This Once...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}
<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>
6

Utilice FlexBox CSS

Flexbox se adapta perfectamente a este tipo de problema. Si bien es conocido principalmente por distribuir contenido en dirección horizontal, Flexbox funciona igual de bien para los problemas de distribución vertical. Todo lo que tiene que hacer es envolver las secciones verticales en un contenedor flexible y elegir cuáles desea expandir. Automáticamente ocuparán todo el espacio disponible en su contenedor.

0
6

En realidad, lo que mejor me funcionó fue usar la vhpropiedad.

En mi aplicación React, quería que el div coincidiera con la página alta incluso cuando se cambia el tamaño. Lo intenté height: 100%;, overflow-y: auto;pero ninguno de ellos funcionó cuando la configuración height:(your percent)vh;funcionó como se esperaba.

Nota: si está utilizando relleno, esquinas redondeadas, etc., asegúrese de restar esos valores del vhporcentaje de su propiedad o agregará altura adicional y hará que aparezcan barras de desplazamiento. Aquí está mi muestra:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
1
  • Por cierto, menciona 'esquinas redondeadas' que afectan la altura de su elemento, espero que la configuración box-sizing: border-box;supere esto, significa que el tamaño del borde también se tiene en cuenta al calcular el tamaño (ancho y alto) del elemento.
    Neek
    15/06/19 a las 14:28
5

Puedes usar display: flexyheight: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>
1
  • Ya hay varias soluciones de flexbox publicadas, incluida una con esta implementación exacta publicada solo 26 días antes de esta respuesta.
    TylerH
    3 de enero de 2018 a las 18:02
5

Debe hacer dos cosas, una es establecer la altura al 100%, lo que ya hizo. En segundo lugar, se establece la posición en absoluto. Eso debería hacer el truco.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Fuente

2
  • 3
    Solución obsoleta. Úselo en su vhlugar. 4 de febrero de 2016 a las 10:09
  • 2
    No lo use vhsi planea usar un diseño receptivo en dispositivos móviles. 23 de mayo de 2019 a las 16:51
5

Pruebe el siguiente CSS:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
5

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100vh; // Height window (vh)
}
.wrapper .left{
  width: 80%; // Width optional, but recommended
}
.wrapper .right{
  width: 20%; // Width optional, but recommended
  background-color: #dd1f26;
}
<!-- 
vw: hundredths of the viewport width.
vh: hundredths of the viewport height.
vmin: hundredths of whichever is smaller, the viewport width or height.
vmax: hundredths of whichever is larger, the viewport width or height.
-->
<div class="wrapper">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>
1
  • 1
    Posible error ortográfico: widht(cerca del final) 8 de julio de 2019 a las 23:46