4

Quiero hacer que un div ocupe hasta abajo del todo dela pantalla.

Yo como solución pensé en declarar a dicho div (en el ejemplo "div2") con height:100%;.

Al no funcionarme, vi que la gente dice que la solución a esto es declarar html, body {height=100%;}.

Sigue sin funcionarme como se muestra en snippet de abajo.

Otra cosa que he probado es declarando height:100vh;. Pero esto es incorrecto, ya que al tener el "div1" esto provoca que haya un overflow y yo simplemente quiero que rellene la pantalla.

html, body{
  height:100%
  margin 0;
}
#div1{
  height:80px;
  width: 100%;
  background-color: red;
  
  display:flex;
  justify-content: center;
  align-items: center;
}

#div2{
  height:100%;
  width: 100%;
  background-color: green;
}
<div id="div1"> Contenido del div 1 </div>

<div id="div2"> Contenido del div 2. Este div quiero que ocupe hasta el final de la pantalla de manera vertical. </div>

¡Salud!

1
  • Agregale una position: fixed; a la clase #div2
    – zerokira
    Commented el 27 mar. 2018 a las 14:17

6 respuestas 6

9

Puedes hacerlo mediante javascript, con su propiedad screen.heigth, la cual toma el alto total de la pantalla en la que te encuentras y se la agregas mediante una variable. Quedaria algo asi:

<script type="text/javascript">

$(document).ready(function(){

      var height = $(window).height();

      $('#div2').height(height);
});

</script>

Asi tomara la altura de cualquier pantalla en la cual se visualice tu pagina o aplicacion

4

coloca el display:flex en tu body y agrega el flex-direction:column para tomar el 100% del largo de forma vertical

Ademas tenias un error de sintaxis en el height y margin en el selector html,body

De la siguiente manera, es el resultado que esperas

html, body{
  height:100%;
  margin:0;
  display: flex;
  flex-direction: column;
}
#div1{
  height: 80px;
  width: 100%;
  background-color: red;
  justify-content: center;
  align-content: center;
}

#div2{
  height:100%;
  width: 100%;
  background-color: green;
}

mira aqui el ejemplo

3

Para lograr el efecto deseado puedes declararle al body como display: flex y que ocupe todo el alto de la pantalla además de decirle que su dirección sea de columna flex-direction: column, al div que quieres que ocupe el resto de espacio declaramos flex: 1 que es equivalente a flex-grow: 1

html, body{
  display: flex;
  flex-direction: column;
  height:100vh;
  margin 0;
}
#div1{
  height:80px;
  width: 100%;
  background-color: red;
  
  display:flex;
  justify-content: center;
  align-items: center;
}

#div2{
  flex: 1;
  background-color: green;
}
<div id="div1"> Contenido del div 1 </div>

<div id="div2"> Contenido del div 2. Este div quiero que ocupe hasta el final de la pantalla de manera vertical. </div>

0
  1. para div width Se establece en 100vw, Div height Establecer como 100vh(La siguiente es una breve descripción de vw y vh).

  2. Después de eso, si quieres aplica un Reset.

div {
    background-color: red;
    width:100vw;
    height:100vh; 
}
* {
    margin: 0;
    padding: 0;
}

0

En tu contenedor main agrégale un min-height 100vh

-6

Agrégale a la clase #div2 position: fixed; esto deberia de funcionar, si algo me cuentas.

3
  • 1
    Como puse en el post eso no sirve... Esto genera que el div tenga el tamaño de la pantalla, pero al ya haber otro div, este div es demasiado grande.
    – Lleims
    Commented el 27 mar. 2018 a las 14:15
  • @CarlosMilles me dices si esto te sirve.
    – zerokira
    Commented el 27 mar. 2018 a las 14:28
  • Esa solución no sirve amigo
    – 2coolDevs
    Commented el 18 mar. 2022 a las 21:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.