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

Question

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

30 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas html css height or haz tu propia pregunta.

mike · Answer 1

Tengo un diseño con dos columnas, a la izquierda div y un derecho div.

El div tiene un gris background-color, y necesito que se expanda verticalmente dependiendo de la altura de la ventana del navegador del usuario. Ahora mismo el background-color termina en la última pieza de contenido en ese div.

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

preguntado Oct 15 '09, 18:10

mike

Puede que encuentre útil esta pregunta stackoverflow.com/questions/1366548/… - Ivan Nevostruev

Buen camino a seguir, pero se sabe que las unidades vh, vw, etc. tienen errores. Existe esta alternativa ligera de js si la necesita: joaocunha.github.io/vunit - see sharper

Aquí hay una explicación simple y clara del CSS. height propiedad con valores porcentuales: stackoverflow.com/a/31728799/3597276 - Michael Benjamin

puedes usar altura: 100vh; propiedad css - Vishnu Chauhan

James Donnelly · Answer 2

Hay un par de unidades de medida CSS 3 llamadas:

Porcentaje de ventana gráfica (o relativo a la ventana gráfica) Longitudes

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

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

Las longitudes de porcentaje de la 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.

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: 1vh es igual al 1% de la altura de la ventana gráfica. Es decir, 100vh es igual a la altura de la ventana del navegador, independientemente de dónde se encuentre el elemento en el árbol DOM:

HTML

<div></div>

CO

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. Verificar Puedo usar... para mayor apoyo.

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

En el caso de la pregunta que nos ocupa, que presenta un divisor izquierdo y otro derecho, aquí hay un Ejemplo de JSFiddle mostrando un diseño de dos columnas que incluye tanto vh y vw.

¿Cómo es `100vh` diferente a `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>

El p La etiqueta aquí está configurada al 100% de altura, pero debido a que contiene div tiene 200 píxeles de altura, el 100% de 200 píxeles se convierte en 200 píxeles, no 100% de la body altura. Utilizando 100vh en cambio significa que el p la etiqueta será el 100% de la altura de la body a pesar de div altura. Mira esto acompañando a JSFiddle para ver fácilmente la diferencia!

Ariona Rian · Answer 3

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

Aquí hay un ejemplo:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

Respondido 22 Oct 13, 02:10

Ariona Rian

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

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

@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. Aquí hay un ejemplo. - toto_tico

Este truco funciona en algunos casos, pero tampoco en algunos casos. 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 - Ariona Rian

@Qwerty, aquí está la solución. Establezca css 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% } - cameronjonesweb

Tinister · Answer 4

Si puede colocar absolutamente sus elementos,

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

Lo haría.

contestado el 23 de mayo de 14 a las 00:05

Tinister

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. - ricky boyce

Eso no funciona, cuando uno de sus padres está configurado para position:relative y 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

MrGeek · Answer 5

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 */
}

Respondido 09 Jul 19, 00:07

MrGeek

@Lamar Deberías usar * { box-sizing: border-box; } para evitar que eso suceda. - luca steeb

Vale la pena consultar caniuse para conocer la compatibilidad del navegador en las unidades de visualización: caniuse.com/#feat=viewport-units - Dave Everitt

Alireza · Answer 6

Puedes usar vh en este caso que es relativo a 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í:

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>

Respondido el 17 de Septiembre de 19 a las 09:09

Alireza

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? - DILEEP THOMAS

@DILEEPTHOMAS busca existente paddings/margins - Leyendas

@Legends en el archivo raíz que intenté dar como * {margin: 0, padding: 0} pero no funcionó - DILEEP THOMAS

@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. - Leyendas

Airen · Answer 7

Todas las demás soluciones, incluida la más votada con vh son subóptimos en comparación con los modelo flexible solución.

Con el advenimiento de la Modelo flexible CSS, resolver el problema de la altura al 100% se vuelve muy, muy fácil: usar height: 100%; display: flex en el padre, y flex: 1 en los elementos secundarios. 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 los principales navegadores así como 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>

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

respondido 06 nov., 14:19

Airen

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

Ejemplo del problema que señala Schellmax: jsfiddle.net/Areté/b4g0o3pq - Arete

Dependiendo del diseño, overflow-y: auto; puede evitar que "los contenedores excedan la altura del cuerpo original". - Canción de Evi

cletus · Answer 8

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 navegador cruzado) usando flotadores en su lugar.

Majda · Answer 9

Esto es lo que funcionó para mí:

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

Utilice la herramienta position:fixed en lugar de position:absolute, de esa manera, incluso si se desplaza hacia abajo, la división se expandirá hasta el final de la pantalla.

contestado el 15 de mayo de 19 a las 15:05

Majda

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 realmente necesitas desplazarte hacia abajo. ¡Todavía masa útil! - mannyfatboy

Jonas Sandstedt · Answer 10

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, utilice modernizr.

Agregue este script (para agregar detección para 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 a #your-object si el navegador no es compatible vh-units:

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

machineghost · Answer 11

Incluso con todas las respuestas aquí, me sorprendió descubrir que ninguna realmente resolvió el problema. Si yo usara 100vh height/min-height, el diseño se rompía cuando el contenido era más largo que una página. Si en cambio usara 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;
}

respondido 12 mar '20, 20:03

machineghost

Tengo una barra de navegación de altura fija de 90px, así que tuve que cambiar tu "100vh" a "calc (100vh - 90px)" - Mark Jackson

Dinesh Pandiyan · Answer 12

100% funciona de manera diferente para ancho y alto.

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

Cuando especificas 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 elementos secundarios será 0 o altura del padre, y es por eso que necesita establecer el elemento superior para tener un min-height de altura 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;
}

lukaszkups · Answer 13

Prueba esto, probado:

body {
  min-height: 100%;
}

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

Edición: actualización 2020:

Puedes usar vh ahora:

#right, #left {
  height: 100vh
}

contestado el 12 de mayo de 20 a las 08:05

lukaszkups

Руслан · Answer 14

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

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

Si desea configurar el div ancho o alto 100% del tamaño de la ventana del navegador que debe usar:

Para ancho: 100vw

Por altura: 100vh

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

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

respondido 06 nov., 20:13

Руслан

Remus Simion · Answer 15

Añada min-height: 100% y no especifique una altura (o la ponga en automático). Hizo el trabajo totalmente por mí:

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

Respondido 30 Oct 13, 16:10

Remus Simion

EMILO · Answer 16

La forma más sencilla es hacerlo así.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

Respondido el 08 de enero de 20 a las 18:01

EMILO

Santosh Khalse · Answer 17

Hay varios métodos disponibles para establecer la altura de un <div> a 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>

testing · Answer 18

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.

Respondido 09 Jul 19, 00:07

testing

Mohammed Javed · Answer 19

Intenta configurar height:100% in html & body

html, 
body {
    height: 100%;
}

Y si desea 2 div de altura del mismo uso o establecer el elemento principal display:flex propiedad.

Respondido el 07 de Septiembre de 17 a las 14:09

Mohammed Javed

Michael Benjamin · Answer 20

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 Contextos de formato de bloque

En un contexto de formato de bloque, los cuadros se colocan uno tras otro, verticalmente, comenzando en la parte superior de un bloque contenedor.

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>

khalifeh · Answer 21

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

height: 100vh;

Respondido 09 Jul 19, 00:07

khalifeh

Stickers · Answer 22

Una de las opciones es usar la tabla CSS. Tiene una gran compatibilidad con el 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>

Respondido 09 Jul 19, 00:07

Stickers

newdark-it · Answer 23

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/

Respondido 09 Jul 19, 00:07

newdark-it

robross0606 · Answer 24

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

contestado el 12 de mayo de 15 a las 01:05

robross0606

Sunil R. · Answer 25

Prueba esto una vez ...

*{
  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>

Respondido el 03 de diciembre de 19 a las 11:12

Sunil R.

Thuc Nguyen · Answer 26

Puedes usar display: flex y height: 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>

Respondido 29 Oct 17, 06:10

Thuc Nguyen

Ya hay varias soluciones de flexbox publicadas, incluida una con esta implementación exacta publicada solo 26 días antes de esta respuesta. - tylerh

Prabhakar Undurthi · Answer 27

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

contestado el 11 de mayo de 18 a las 13:05

Prabhakar Undurthi

Solución obsoleta. Usar vh en lugar de. - avalancha1

No use vh si planea utilizar un diseño receptivo en dispositivos móviles. - alejandro kim

ProblemChild · Answer 28

Pruebe el siguiente CSS:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

Respondido 09 Jul 19, 00:07

ProblemChild

JimmyFlash · Answer 29

En realidad, lo que mejor me funcionó fue usar el vh propiedad.

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 funcionó al configurar height:(your percent)vh; funcionó como se esperaba.

Nota: si está utilizando relleno, esquinas redondeadas, etc., asegúrese de restar esos valores de su vh porcentaje de propiedad o agrega altura adicional y hace 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);
}

Respondido 09 Jul 19, 00:07

JimmyFlash

Por cierto, mencionas 'esquinas redondeadas' que afectan la altura de tu elemento, espero configurar box-sizing: border-box; superaría 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

RamNiwas Sharma · Answer 30

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

Respondido 23 Feb 21, 10:02

RamNiwas Sharma

Posible falta de ortografía: widht (cerca del final) - Pedro Mortensen

Rudra · Answer 31

Este material cambiará el tamaño de la altura del contenido automáticamente de acuerdo con su navegador. Espero que esto funcione para tí. Prueba este ejemplo que se muestra a continuación.

Solo tienes que configurar height:100%.

html,body {
  height: 100%;
  margin: 0;
}
.content {
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content-left {
  height: auto;
  min-height: 100%;
  float: left;
  background: #ddd;
  width: 50%;
  position: relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;
  width: 50%;
  position: relative;
  float: left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width: 50%;
  float: left;
  position: relative;
  overflow-y: scroll;
}

<div class='content' id='one'></div>
<div class='content-left' id='two'></div>

30 Respuestas

Porcentaje de ventana gráfica (o relativo a la ventana gráfica) Longitudes

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

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

HTML

CO

¿Qué navegadores admiten estas nuevas unidades?

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

¿Cómo es 100vh diferente a 100%?

¿Cómo es `100vh` diferente a `100%`?