Tengo un div con la siguiente clase css (generada)

min-height: {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    min-height: -webkit-calc(100% - 60px) !important;
    min-height: -moz-calc(100% - 60px) !important;
    min-height: calc(100% - 60px) !important;
}

Cuando agrego un div dentro con una altura del 100%, el contenido no se llena con el div principal, solo cuando el div principal tiene el atributo de altura establecido, no la altura mínima.

¿Cómo puedo hacer que el div secundario se expanda al tamaño completo del div principal si solo tiene una altura mínima establecida?

<div class="min-height">
    <div class="full-height">not much content<div> 
</div>
0
Ben Flowers 14 nov. 2017 a las 22:29

2 respuestas

La mejor respuesta

Cuando declara una altura en algo así, su padre debe tener una altura especificada, y así sucesivamente en la cadena.

(También tiene muchos errores de sintaxis en su CSS)

Por ejemplo. Agregue una altura a los elementos HTML y Body. También dale al padre una altura. Ahora su hijo puede tener el 100% de la altura de su contenedor.

body, html {
 height: 100%;
}

.min-height {
    margin-top: 30px;
    margin-bottom: 30px;
    height: 100%;
    min-height: calc(100% - 60px);
    background: gray;
    padding: 10px;
}

.full-height {
  height: 100%;
  background: yellow;
}
<div class="min-height">
    <div class="full-height">not much content<div> 
</div>
0
Robert Wade 14 nov. 2017 a las 19:41

La clase de altura mínima también debe tener una altura. Luego agregue las siguientes reglas para la clase de altura completa:

.full-height {
  display: block;
  height: 100%;
}
0
pjones235 14 nov. 2017 a las 19:36