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


Tengo un diseño con dos columnas - una izquierda div y un derecho div.

El derecho div tiene un gris background-color, y necesito que se expanda verticalmente según la altura de la ventana del navegador del usuario. En este momento el background-color termina en la última pieza de contenido en ese div.

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


1681
2017-10-15 21:18


origen


Respuestas:


Hay un par de unidades de medida CSS3 llamadas:

Viewport-Porcentaje (o Viewport-Relative) Longitudes

¿Cuáles son las duraciones de porcentaje de la ventana gráfica?

De la Recomendación del Candidato W3 vinculada arriba:

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

Estas unidades son vh (altura del puerto de visualización), 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 al alto 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 JSFiddle de esto en uso.

¿Qué navegadores son compatibles con estas nuevas unidades?

Actualmente, esto es compatible con todos los navegadores principales actualizados, aparte de Opera Mini. Revisa Puedo usar... para mayor soporte.

¿Cómo se puede usar esto con múltiples columnas?

En el caso de la pregunta en cuestión, con un divisor izquierdo y uno derecho, aquí hay una Ejemplo JSFiddle mostrando un diseño de dos columnas que involucra a ambos vh y vw.

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

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


2364
2018-05-30 13:33



Si quieres establecer la altura de un <div> o cualquier elemento, debe establecer la altura de <body> y <html> al 100% también Entonces puedes establecer la altura del elemento con 100% :)

Aquí hay un ejemplo:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

520
2017-12-11 13:10



Si puedes posicionar absolutamente tus elementos,

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

Lo haría.


242
2017-10-15 21:31



Puede usar la unidad view-port 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*/
}

127
2018-05-04 11:11



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

Con el advenimiento de la Modelo CSS flex, resolver el problema del 100% de altura se vuelve muy, muy fácil: usar height: 100%; display: flexen el padre, y flex: 1 en los elementos secundarios. Tomarán automáticamente todo el espacio disponible en su contenedor.

Tenga en cuenta lo simple que son el marcado y el CSS. Sin mesa piratea ni nada.

El modelo de flexión es compatible con todos 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>

Conozca más sobre el modelo flex aquí.


85
2018-06-12 14:14



No mencionas algunos detalles importantes como:

  • ¿El diseño es de ancho fijo?
  • ¿Hay una o ambas columnas de 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 necesitan ser reparadas y cuáles son líquidas. También puedes hacer esto con un posicionamiento absoluto, pero generalmente he encontrado mejores resultados (particularmente en términos de navegación cruzada) usando flotantes.


47
2017-10-15 23:13



Puedes usar vh en este caso, que es relativo a 1% de la altura de la ventana gráfica.

Eso significa que si quieres cubrir la altura, solo usa 100vh.

Mira la imagen que dibujo para ti aquí:

How to make a div 100% height of the browser window?

Pruebe el fragmento que creé para usted, como se muestra a continuación:

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


40
2018-06-03 17:43



Aquí hay una solución para la altura.

En tu uso de CSS:

#your-object: height: 100vh;

Para el navegador que no admite vh-units, usa 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'});
    }
});

25
2017-08-21 16:57



Esto es lo que funcionó para mí:

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

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


24
2017-07-27 16:18



Añadir min-height: 100% y no especifique una altura (o póngalo en automático). Me hizo totalmente el trabajo:

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

14
2017-12-10 21:34



Esto funcionó para mí:

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

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}

Tomado de esta página.


11
2018-06-12 14:01