Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Capa "Child" que se ajuste 100% de la altura de la "Parent" en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/11/2014, 13:27
 
Fecha de Ingreso: febrero-2013
Mensajes: 119
Antigüedad: 11 años
Puntos: 2
Capa "Child" que se ajuste 100% de la altura de la "Parent"

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...

Última edición por corei7; 25/11/2014 a las 14:11
  #2 (permalink)  
Antiguo 25/11/2014, 15:42
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Capa "Child" que se ajuste 100% de la altura de la "Parent"

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
  #3 (permalink)  
Antiguo 26/11/2014, 05:11
 
Fecha de Ingreso: febrero-2013
Mensajes: 119
Antigüedad: 11 años
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.
  #4 (permalink)  
Antiguo 26/11/2014, 09:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Capa "Child" que se ajuste 100% de la altura de la "Parent"

¿El elemento label tiene altura fija o es variable?
__________________
(:
  #5 (permalink)  
Antiguo 26/11/2014, 10:15
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Capa "Child" que se ajuste 100% de la altura de la "Parent"

Cita:
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

Etiquetas: 100%, height, overflow
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:53.