2141

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

El derecho divtiene un gris background-color, y necesito que se expanda verticalmente dependiendo de la altura de la ventana del navegador del usuario. En este momento, background-colortermina en la última pieza de contenido en eso div.

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

html css height

— Miguel
fuente

77

Puede encontrar esta pregunta útil stackoverflow.com/questions/1366548/…

— Ivan Nevostruev

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

— vea el

Aquí hay una explicación simple y clara de la heightpropiedad CSS con valores porcentuales: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

44

Puedes usar la altura: 100vh; propiedad css

— Vishnu Chauhan

2835

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 de Candidato W3 vinculada arriba:

Las longitudes de porcentaje de 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 ventana), vw(ancho de ventana), vmin(longitud mínima de ventana) y vmax(longitud máxima de ventana).

¿Cómo se puede usar 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, aparte de Opera Mini. Consulte ¿Puedo usar ... para obtener más ayuda?

¿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 un ejemplo de JSFiddle que muestra un diseño de dos columnas que involucra ambos vhy 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>

La petiqueta aquí está establecida en 100% de altura, pero debido a que contiene div200 píxeles de altura, el 100% de 200 píxeles se convierte en 200 píxeles, no en el 100% de la bodyaltura. En su 100vhlugar, usar significa que la petiqueta tendrá una altura del 100% bodyindependientemente de la divaltura. ¡Eche un vistazo a este JSFiddle que lo acompaña para ver fácilmente la diferencia!

— James Donnelly
fuente

35

Comportamiento extraño con el desplazamiento cuando el elemento es realmente más alto que la ventana gráfica. El contenedor mantiene la altura de la vista y el contenido fluye fuera del contenedor. min-height:100vhparece funcionar alrededor de esto.

— wdm

8

@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 te refieres, pero esos 4 representan más del 90% de los navegadores móviles utilizados. Esta pregunta no especifica un requisito para trabajar en navegadores móviles.

— James Donnelly

1

@ robross0606 nuevamente, esa no es la pregunta que he respondido aquí. Esa es una pregunta completamente diferente, cuya respuesta sí usa flexbox: stackoverflow.com/questions/90178/…

— James Donnelly

1

@JamesDonnelly Sí, lo sé. Pero esa no es la respuesta a esta pregunta. La altura de la ventana del navegador incluye la altura de la barra de navegación. Esto sería mejor, porque en los navegadores móviles, la altura de la vista cambia cada vez que se muestra / oculta la barra de navegación.

— RedClover

3

Alerta móvil: usando vh mess con Chrome mobile que no tiene en cuenta su barra de navegación. Luego cubre la parte superior de su página con él. Un problema grave si tienes un menú allí ...

— Offirmo

568

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

— Ariona Rian
fuente

109

Corrígeme si me equivoco, pero creo que también debes establecer la altura a todos los padres del div, para que realmente trabajen

— Dany Y

Esto no funcionará si estoy usando un diseño continuo: página 6000px de altura, con bloques que representan páginas. Quiero que un bloque sea exactamente la altura de la ventana gráfica.

— Qwerty

@DanyY, tienes razón. Es necesario establecer la altura a 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 para algunos casos, pero no lo sería también para algunos casos. Si busca compatibilidad o la forma más recomendada, puede ver la respuesta de @ James arriba :) Usando el método de porcentaje de vista :) También debería funcionar. aplausos

— Ariona Rian

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

— cameronjonesweb

283

Si puede posicionar absolutamente sus elementos,

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

Lo haría.

— Tinister
fuente

16

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

— Ricky Boyce

1

Eso no funciona, cuando uno de sus padres está configurado position:relativey su altura no es el 100% de la ventana gráfica. Se ajustará arriba y abajo a su próximo ancestro relativo o absoluto.

— Seika85 01 de

141

Puede usar la unidad de puerto de vista 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 */
}

— MrGeek
fuente

1

@Lamar Debe usar * { box-sizing: border-box; }para evitar que eso suceda.

— Luca Steeb

2

Vale la pena consultar caniuse para obtener soporte del navegador en unidades de ventana gráfica

— Dave Everitt

133

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 a continuación que dibujo para ti 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>

Expandir fragmento

— Alireza
fuente

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 que el div toque el fondo sin ningún contenido?

— DILEEP THOMAS

@DILEEPTHOMAS busca existentepaddings/margins

— Legends

@Legends en el archivo raíz que intenté dar como * {margen: 0, relleno: 0} pero no funcionó

— DILEEP THOMAS

1

@DILEEPTHOMAS eche un vistazo a 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 desaparecerá. Puede tener diferentes causas, pero esta sería la primera en pagar.

— Leyendas

102

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

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

Tenga en cuenta lo simple que son el marcado y el CSS. No hacks de mesa ni nada.

El modelo flexible es compatible con todos 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>

Expandir fragmento

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

— Airen
fuente

3

una advertencia: cuando el contenido de uno de los contenedores izquierdo / derecho excede la altura original del cuerpo, el contenedor opuesto no cambiará de tamaño, por lo que los contenedores terminan con diferentes alturas.

— schellmax

1

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

— Arete

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

— Evi Song

54

No mencionas algunos detalles importantes como:

¿El diseño es de ancho fijo?
¿Una o ambas columnas tienen 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>

Expandir fragmento

Hay muchas variaciones sobre esto dependiendo de qué columnas necesitan ser reparadas 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 flotantes.

— cletus
fuente

34

Esto es lo que funcionó para mí:

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

Expandir fragmento

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.

— Majda
fuente

Este código con la "posición: [fijo | absoluto]" es ideal para los fondos de ventanas emergentes (como cuando hace clic para hacer zoom en una imagen), pero no es tan seguro en los casos en que realmente necesita desplazarse hacia abajo. ¡Masa útil todavía!

— Mannyfatboy

29

Aquí hay una solución para la altura.

En su uso de CSS:

#your-object: height: 100vh;

Para los navegadores que no son compatibles vh-units, use modernizr.

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

— Jonas Sandstedt
fuente

24

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 el ancho de la ventana".

Cuando especifica height: 100%, solo significa "tomar el 100% de la altura disponible del elemento padre". Esto significa que si no especifica una altura en un elemento de nivel superior, la altura de todos los elementos secundarios será la 0altura o la altura del elemento primario, y es por eso que debe establecer el elemento superior para tener 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;
}

— Dinesh Pandiyan
fuente

16

Agregue min-height: 100%y no especifique una altura (o póngala en auto). Realmente hizo el trabajo por mí:

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

— Remus Simion
fuente

16

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

Para la altura: 100vh

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

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

— Руслан
fuente

12

Hay varios métodos disponibles para configurar 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>

Expandir fragmento

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>

Expandir fragmento

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>

Expandir fragmento

— Santosh Khalse
fuente

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 .

— pruebas
fuente

12

La manera más simple es hacerlo así.

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

<div></div>

Expandir fragmento

— EMILO
fuente

11

Tratar de establecer height:100%en htmlybody

html, 
body {
    height: 100%;
}

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

— Mohammed Javed
fuente

9

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

— maquina
fuente

1

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

— Mark Jackson

8

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

height: 100vh;

— khalifeh
fuente

7

Los elementos de bloque consumen el ancho completo de su padre, por defecto.

Así es como cumplen con sus requisitos de diseño, que es apilar 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.

Este comportamiento, sin embargo, no se extiende a la altura.

Por defecto, la mayoría de los elementos son 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 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>

Expandir fragmento

— Michael Benjamin
fuente

7

Aquí hay algo que no es exactamente como lo que tenía en 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/

— newdark-it
fuente

6

Use CSS de FlexBox

Flexbox es perfecto para este tipo de problema. Si bien es conocido principalmente por distribuir contenido en dirección horizontal, Flexbox realmente funciona igual de bien para problemas de diseño vertical. Todo lo que tiene que hacer es envolver las secciones verticales en un contenedor flexible y elegir cuáles desea expandir. Ocuparán automáticamente todo el espacio disponible en su contenedor.

— robross0606
fuente

6

Una de las opciones es usar la tabla CSS. Tiene una gran compatibilidad con el navegador e incluso funciona en Internet Explorer 8.

JSFiddle Ejemplo

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>

Expandir fragmento

— Pegatinas
fuente

6

Prueba esto: probado:

body {
  min-height: 100%;
}

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

Edición: actualización 2020:

Puedes usar vhahora:

#right, #left {
  height: 100vh
}

— lukaszkups
fuente

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>

Expandir fragmento

— Thuc Nguyen
fuente

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

— TylerH

5

Debe hacer dos cosas, una es establecer la altura al 100% 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

— Prabhakar Undurthi
fuente

3

Solución desactualizada. Usar en su vhlugar.

— avalanche1

1

No lo use vhsi planea usar un diseño receptivo en dispositivos móviles.

— Alexander Kim

5

Pruebe el siguiente CSS:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— Niño problema
fuente

5

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 cambiaba el tamaño. Lo intenté height: 100%;, overflow-y: auto;pero ninguno de ellos funcionó cuando configurarlo height:(your percent)vh;funcionó según lo previsto.

Nota: si está utilizando relleno, esquinas redondeadas, etc., asegúrese de restar esos valores del vhporcentaje de su 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);
}

— JimmyFlash
fuente

Por cierto, mencionas 'esquinas redondeadas' que afectan la altura de tu 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

5

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

Expandir fragmento

— Sunil Rajput
fuente

3

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

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

— John Smith opcional
fuente

1

No hay necesidad de JavaScript. La solución moderna es usar el modelo de caja flexible CSS .

— Dan Dascalescu

Si está utilizando JS, encontré que esto es bastante útil. NOTA: es mejor usar esto con $ (window) .load (), ya que obtendrá diferentes resultados devueltos usando F5 o CTRL + F5. Mira este enlace para más información. stackoverflow.com/questions/13314058/…

— edward

2

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>

— RamNiwas Sharma
fuente

1

Posible error ortográfico: widht(cerca del final)

— Peter Mortensen

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

Viewport-Porcentaje (o Viewport-Relativa) Longitudes

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

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

HTML

CSS

¿Qué navegadores admiten estas nuevas unidades?

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

¿Cómo es 100vhdiferente a 100%?

HTML

CSS

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