Hola, estoy diseñando una pagina web y durante el proceso me ha
surgido un problema, me gustaria que me ayudarais a resolverlo.
Mi pagina web esta diseñada con capas (divs), durante el proceso cree
un icono en javascript que se encargaba de aumentar el tamaño de
letra, puse algunas capas en "position:relative" para que cuando
creciera el texto se autoadaptasen al flujo, tanto las capas de
contenido en texto como las capas padre que contenian dentro estas
capas de contenido en texto, les puse el atributo "height: (valor)px
auto" para que cuando creciesen el tamaño de las letras tambien
creciese la altura de las capas automaticamente. Una de las capas
padre que contiene 3 capas, 2 capas de contenido en texto y otra capa
relleno en medio de las 2 de contenido para separarlas, esta capa de
relleno tiene un "background-image: url('barra.png')", tambien tiene
una altura (height) fija puesta en px.
Problema: Cuando aumenta el tamaño de la letra aumentan la altura de
la capa padre, y la altura de las capas de contenido que estan dentro
porque estan puestas en "height: (valor)px auto", pero la capa relleno
que contiene "background-image: url('barra.png')" no aumenta su altura
(height). ¿ Como podria hacerlo para que la capa de relleno pudiese
aumentar la altura al mismo tiempo que aumentan las capas de contenido
y la capa padre?
He probado un par de soluciones pero no me han funcionado:
1. Poner en la capa relleno la altura (height) en "auto". No funciona
porque cuando aumenta el tamaño de la letra la capa no tiene la
necesidad de aumentar su tamaño, en cambio las otras si porque sino el
texto sobrepasaria la capa.
2.Poner en la capa relleno la altura (height) en 100%. Pense en poner
esto porque cada vez que aumenta el tamaño de la letra, aumenta
tambien la altura de la capa padre, y estando la capa relleno a una
altura del 100% siempre estaria a la altura de la capa padre, pero no
funciona, la capa se acorta como si tuviese "height: 0px".
Si pudierais resolver este problema os estaria agradecido.
Gracias
.