Ver Mensaje Individual
  #3 (permalink)  
Antiguo 26/11/2014, 05:11
corei7
 
Fecha de Ingreso: febrero-2013
Mensajes: 119
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: Capa "Child" que se ajuste 100% de la altura de la "Parent"

Cita:
Iniciado por juangemelo01 Ver Mensaje
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.