Capa "Child" que se ajuste 100% de la altura de la "Parent"

[juangemelo01]

Hola, muchas gracias por la respuesta, me ha servido como apunte pero no soluciona el problema.

El párrafo necesita tener un alto de 100% siempre, quiero decir, que este no aumente su altura al haber más texto, sino que su altura sea fija siempre, que ocupe el alto total de la capa "Parent".

He cambiado un poco el código en este Fiddle: http://jsfiddle.net/8nWDE/271/
cambiando el párrafo por una capa, para hacerlo más simple. Si te fijas, la capa "inner" tiene altura de 100% como propiedad pero en cambio no toma altura. Lo siento si he creado confusión, pero resumiendo sería esto:

Parent: altura fija
Child: que se expanda a la altura total del Parent

Agradezco mucho tu ayuda.

¿cual es la capa parent?

supongamos que tu div rojo es la capa parent
si quieres que este tenga una altura fija, y que no se adapte lo alto al contenido, solo dejale el height: 200px; y le quitas height:auto; y min-height:200px;

ahora bien, ¿estas considerando en el interior de tu caja la altura de tu label?
tu formula matemática tendría que ser la siguiente
alturaParent = alturaLabel + alturainner + Margenes + paddings + bordes
si la alturaParent es igual a 200px, ya sabes que la suma de todos los parámetros te tiene que dar 200px, de lo contrario, tendrías ese desborde de tu caja, a no ser que le pongas la propiedad overflow:hidden al parent

ahora bien, supongamos que no le pones margenes ni paddings a tu label y a tu inner
si consideramos que 200px es el 100% y tu quieres que tu label ocupe siempre una altura del 10% y tu inner ocupe una altura del 90% (90% + 10% = 100%) tendrias que poner lo siguiente a tu hoja de estilo

Código:

#innerPageWrapper {
  background:red;
  border:3px solid blue;  
  height:200px;
/*
En caso de que quieras que se adapte, borra el height y el comentario
  height:auto;
  min-height:200px;
  */
   width:120px;  
}

#innerPageWrapper label{
  background-color:green;
  display:block;
  heigth:20px;  
  max-heigth:10%;
  width:100%;
}
#inner{
    background: yellow;
    display:block;
    height:180px;  
    max-height: 90%;   
    width: 100%;
}

por si te preguntas ¿por que height y max-height, en que se diferencia uno del otro?
si solo le pones el height, estas dejando tu altura estatica, al poner el max- heigth, estas dejando tu altura dinamica, pero, no tiene una altura inferior del cual partir, por eso, al tener poco contenido, no te abarcaría toda el area restante, si por alguna razon deseas que la caja roja se expanda en lo alto, tendra una altura dinamica, y tanto la etiqueta como el inner se adaptaran de manera automatica respetando esos porcentajes,

espero que te sea de ayuda mi respuesta amigo, cualquier cosa, comenta