2

comunidad. Tengo el siguiente problema:

  • tengo un contenedor con clase container
  • dentro de este tengo un header de 150px y un div que quiero que tenga de altura todo el espacio restante

Pero al colocarle el 100% en el height toma altura de más y hace overflow!

Quisiera saber si existe alguna estrategia para poder conseguirlo PD. Ya he intentado con calc pero quisiera saber si existe otra forma

*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.wrapper{
height:100%;
}
.wrapper header{
height:150px;
background-color:#ff0000;
}
.wrapper div{
height:100%;
background-color:#000;
}
<div class="wrapper">
  <header>Header</header>
  <div>Aquí va otro contenido</div>
</div>

2 respuestas 2

3

Cuando tu pones height: 100%; el elemento toma el 100% de la altura del primer padre que tenga la altura definida. Además tu defines secuencialmente la altura:

div -> wrapper -> body -> html todo vale el 100% y vale lo mismo, porque son relativa al 100% del html

Y si tienes

<div class="wrapper"> <!-- Vale 100% -->
  <header>Header</header>  <!-- Vale 150px -->
  <div>Aquí va otro contenido</div>  <!-- Vale 100% -->
</div>

Es evidente que se desborda, porque 100% + 150px > 100%

Lo que tienes que haces es restar los 150px al div utilizando calc, para que quede:

calc(100% - 150px) + 150px = 100%

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  height: 100%;
}

.wrapper header {
  height: 150px;
  background-color: #ff0000;
}

.wrapper div {
  height: calc(100% - 150%);
  background-color: #000;
}
<div class="wrapper">
  <header>Header</header>
  <div>Aquí va otro contenido</div>
</div>

Por último, ojo con las unidades el 100% puede ser más grande que la pantalla (viewport), si lo que tu quieres es que siempre sea del tamaño de la ventana debes usar 100vh

2

La propiedad height es una de las más problemáticas y se debe manejar de forma meticulosa.

No puedo decirte con exactitud por qué sucede el overflow, pero sí puedo sugerirte que para jugar con la propiedad en cuestión de manera tranquila, le asignes al padre la propiedad FLEX y en este caso especifico la flex-direction: column con el fin de que los dos hijos queden uno debajo del otro.. y listo!

*{
    margin:0;
    padding:0;
}

html,body{
    height:100%;
}

.wrapper{
    height:100%;
    display:flex;
    flex-direction: column;
}

.wrapper header{
    height:150px;
    background-color:#ff0000;
}

.wrapper div{
    height:100%;
    background-color:#000;
}
<div class="wrapper">
  <header>Header</header>
  <div>Aquí va otro contenido</div>
</div>

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.