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

[corei7]

Buenas, tengo un problema, tengo una capa y quiero que se expanda el alto hasta la altura de la capa "Parent". El problema llega al haber elementos encima de la capa "Child", al tomar el 100% de la altura del "Parent", esta se queda en overflow... Adjunto imagen:



Ejemplo en fiddle: http://jsfiddle.net/8nWDE/269/

Como puedo solucionar esto? Gracias de antemano...

[juangemelo01]

Código:

#innerPageWrapper {
    background:red;
    height:200px;
    width:120px;
}

#innerPageWrapper p{
    background: yellow;
    height: 100%;
    margin: auto;
    width: 100px;
}

tengo la costumbre de ordenar el codigo alfabéticamente

lo que tienes que hacer es en #innerPageWrapper es poner :

Código:

height:auto;
min-height:200px;

eso hara que cuando tu texto rebase los 200px de alto, esa altura se empiece a adaptar a lo que necesites, pruebalo y pon mucho mas texto en tu parrafo

ahi te daras cuenta que tiene un detalle y es que llega al fondo al igual que la caja de color roja que tienes, pero, eso lo puedes solucionar agregando un padding

Código:

padding:10px;

con eso, las dimensiones de tu caja aumentaron 10px en cada lado, pero te sirve como margen entre tu borde y tu contenido de tu caja

dale un vistazo y prueba, cualquier cosa, comenta

[corei7]

Iniciado por juangemelo01

Código:

#innerPageWrapper {
    background:red;
    height:200px;
    width:120px;
}

#innerPageWrapper p{
    background: yellow;
    height: 100%;
    margin: auto;
    width: 100px;
}

tengo la costumbre de ordenar el codigo alfabéticamente

lo que tienes que hacer es en #innerPageWrapper es poner :

Código:

height:auto;
min-height:200px;

eso hara que cuando tu texto rebase los 200px de alto, esa altura se empiece a adaptar a lo que necesites, pruebalo y pon mucho mas texto en tu parrafo

ahi te daras cuenta que tiene un detalle y es que llega al fondo al igual que la caja de color roja que tienes, pero, eso lo puedes solucionar agregando un padding

Código:

padding:10px;

con eso, las dimensiones de tu caja aumentaron 10px en cada lado, pero te sirve como margen entre tu borde y tu contenido de tu caja

dale un vistazo y prueba, cualquier cosa, comenta

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.

[pzin]

¿El elemento label tiene altura fija o es variable?

[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