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

2238

mike 2009-10-16 11:18.

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

La derecha divtiene un color gris background-color, y 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.

html css height

30 answers

2930

James Donnelly 2013-05-31 03:33.

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 del 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: 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 en cuestión, que presenta 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 `100vh`diferencia 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í está configurada al 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!

577

Ariona Rian 2011-12-12 03:10.

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

287

Tinister 2009-10-16 11:31.

Si puedes posicionar tus elementos de manera absoluta,

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

Lo haría.

144

MrGeek 2016-05-05 01:11.

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

137

Alireza 2017-06-04 07:43.

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

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>

107

Airen 2013-06-13 04:14.

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 de la altura al 100% 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 los principales navegadores , 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í.

cletus 2009-10-16 13:13.

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.

Majda 2013-07-28 06:18.

Esto es lo que funcionó para mí:

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

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

Jonas Sandstedt 2013-08-22 06:57.

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

Dinesh Pandiyan 2018-11-19 07:36.

100% funciona de manera diferente para ancho y alto.

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

machineghost 2020-03-13 10:10.

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

lukaszkups 2013-01-29 01:05.

Prueba esto, probado:

body {
  min-height: 100%;
}

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

Edición: actualización 2020:

Puedes usar vhahora:

#right, #left {
  height: 100vh
}

Руслан 2017-09-28 04:06.

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

Remus Simion 2011-12-11 11:34.

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

EMILO 2020-01-09 08:44.

La forma más sencilla es hacerlo así.

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

<div></div>

Santosh Khalse 2017-01-05 00:43.

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>

testing 2013-06-13 04:01.

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 .

Mohammed Javed 2016-04-15 00:19.

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 .

Michael Benjamin 2017-10-04 03:46.

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 2018-03-10 14:52.

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

height: 100vh;

newdark-it 2017-06-13 04:52.

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/

Stickers 2016-01-26 07:36.

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>

Sunil Rajput 2019-12-04 01:21.

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>

robross0606 2015-05-07 11:16.

Utilice FlexBox CSS

Flexbox se adapta perfectamente a este tipo de problema. Si bien es más conocido 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.

Thuc Nguyen 2017-10-29 20:55.

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>

Prabhakar Undurthi 2015-10-17 00:28.

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

ProblemChild 2017-04-18 19:56.

Pruebe el siguiente CSS:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

JimmyFlash 2018-08-23 00:48.

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

John Smith Optional 2013-09-12 23:41.

Si usa position: absolute;y jQuery, podría usar

$("#mydiv").css("height", $(document).height() + "px");

RamNiwas Sharma 2018-05-01 01:02.

HTML

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

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

Japanese Spanish French Portuguese Russian Vietnamese Italian Korean Indonesian Polish Hindi

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que le diagnosticaron envenenamiento por mercurio y plomo, probablemente debido a su trabajo como manipuladora de casas.

2022-12-22.

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Recientemente salió a la luz un informe policial que acusa a la estrella de 'Love Is Blind', Brennon, de violencia doméstica. Ahora, Brennon ha respondido a los reclamos.

2022-12-14.

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Conozca cómo Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia mientras organizaba la primera celebración de Acción de Gracias desde que murió su madre, Naomi Judd.

2022-12-09.

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Descubra por qué un destacado experto en lenguaje corporal cree que es fácil trazar "tales paralelismos" entre la princesa Kate Middleton y la princesa Diana.

2022-12-07.

Estados Unidos podría evitarse el horror del nuevo gran horneado británico

Si este tráiler de pesadilla de la temporada más reciente de Great British Bake Off te asustó y te hizo no volver a ver el programa, es posible que tengas suerte: PBS no ha decidido si se transmitirá o no la última temporada en los Estados Unidos. actualización, para aquellos que no siguen sin aliento este tipo de drama de nicho: el presentador Paul Hollywood y la hermosa carpa llena de batidoras de colores pastel y cuadros se trasladaron de la BBC al Canal 4; Mary Berry, Sue Perkins y Mel Giedroyc renunciaron.

2023-03-30 05:05.

Atún como Oh, Hello llega a Netflix

Foto: Netflix Oh, Hello On Broadway (Netflix): Después de llegar a Broadway el año pasado, los dos locos del Upper West Side interpretados por John Mulaney y Nick Kroll finalmente llegaron a Netflix. El especial consta del espectáculo en el escenario, algunos momentos entre bastidores y un invitado muy especial de “Too Much Tuna”.

2023-03-30 05:01.

Actualice a un Sonicare por tan solo $ 30

¿Quiere probar un cepillo de dientes Sonicare sin gastar mucho dinero en uno de sus modelos favoritos de gama alta? Puede comprar un kit de la Serie 2 o Serie 3 por tan solo $ 30 hoy en Amazon. Haga clic aquí para ver la lista completa de modelos elegibles y tenga en cuenta que se descontarán $ 10 adicionales en su carrito.

2023-03-29 11:42.

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Tapas elásticas de silicona de Tomorrow's Kitchen, paquete de 12 | $14 | Amazonas | Código promocional 20OFFKINJALids son básicamente los calcetines de la cocina; siempre perdiéndose, dejando contenedores huérfanos que nunca podrán volver a cerrarse. Pero, ¿y si sus tapas pudieran estirarse y adaptarse a todos los recipientes, ollas, sartenes e incluso frutas en rodajas grandes que sobran? Nunca más tendrás que preocuparte por perder esa tapa tan específica.

2022-11-02 18:37.

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

El equipo está a la espera de las medallas que ganó en los Juegos Olímpicos de Invierno de 2022 en Beijing, ya que se está resolviendo un caso de dopaje que involucra a la patinadora artística rusa Kamila Valieva.

2023-02-03.

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Miles de compradores de Amazon recomiendan la funda de almohada de seda Mulberry, y está a la venta en este momento. La funda de almohada de seda viene en varios colores y ayuda a mantener el cabello suave y la piel clara. Compre las fundas de almohada de seda mientras tienen hasta un 46 por ciento de descuento en Amazon

2023-02-03.

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

El Departamento de Policía de Lafayette comenzó a investigar a un profesor de la Universidad de Purdue en diciembre después de recibir varias denuncias de un "hombre sospechoso que se acercaba a una mujer".

2023-02-03.

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Al igual que el mundo que nos rodea, el lenguaje siempre está cambiando. Mientras que en eras anteriores los cambios en el idioma ocurrían durante años o incluso décadas, ahora pueden ocurrir en cuestión de días o incluso horas.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

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

30 answers

Viewport-Porcentaje (o Viewport-Relativa) 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

CSS

¿Qué navegadores admiten estas nuevas unidades?

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

¿En qué se `100vh`diferencia de `100%`?

HTML

CSS

Related questions

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

The Secrets of Airline Travel Quiz

Where in the World Are You? Take our GeoGuesser Quiz

¿Caduca el repelente de insectos?

Estados Unidos podría evitarse el horror del nuevo gran horneado británico

Atún como Oh, Hello llega a Netflix

Actualice a un Sonicare por tan solo $ 30

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

Concept Drift: el mundo está cambiando demasiado rápido para la IA

India me está pateando el culo

ℝ

¿Merrick Garland le ha fallado a Estados Unidos?

Es más de la mitad de la presidencia de Biden. ¿Qué está esperando Merrick Garland?

Language

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

30 answers

Viewport-Porcentaje (o Viewport-Relativa) 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

CSS

¿Qué navegadores admiten estas nuevas unidades?

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

¿En qué se 100vhdiferencia de 100%?

HTML

CSS

Related questions

MORE COOL STUFF

Es más de la mitad de la presidencia de Biden. ¿Qué está esperando Merrick Garland?

Language

¿En qué se `100vh`diferencia de `100%`?