[SOLUCIONADO] Porcentaje Height + pixel fijo

[Kottore]

Hola, saludos!

A ver si puedo darme a entender para que alguien me eche un cable por favor.

Resulta que tengo un div contenedor con altura variable/indefinida y dentro tiene 2 divs màs. La idea es que el primer div mida una altura especìfica en height y el otro tome el resto del tama~o. Algo asì:

<div id="contenedor">
<div id="uno"></div>
<div id="dos"></div>
</div>

uno medirìa, por decir, 10px;
Suponiendo que contenedor mida en este caso 100px entonces div dos deberìa medir 90px.
El problema como mencionè es que el height es variable e indefinido. Entonces no sè como decirle a div dos que tome el resto del tama~o de div contenedor

Alguna idea?

Muchas gracias

[Benderzuelo]

Height:100%;

[siddartha23]

Si al momento de cargar la página puedes capturar el height del contenedor puedes resolverlo con javascript div2 = contenedor.height - div1.

En cambio si con variable quieres decir "flexible" no tiene sentido preocuparse, el div 2 va medir lo que mida su contenido y el contendor lo que mida div1 + div 2 ¿Si los tamaños son automáticos de acuerdo al contenido en qué te afectaría?

[alzacon]

Si la altura la da el contendio del 2º div, no hay problema. A no ser que haya lios con los margin y los padding.

En otro caso puedes usar calc.

[Sarlit]

No te calientes, hoy en día todos los navegadores aceptan "flex" y hace lo que dices de la forma más sencilla posible, te dejo el enlace a la documentación oficial y si no te aclaras dimelo y te busco un ejemplo:
[URL="http://www.w3schools.com/cssref/css3_pr_flex.asp"]http://www.w3schools.com/cssref/css3_pr_flex.asp[/URL]

[pzin]

W3Schools no es nada de tipo oficial.

[Kottore]

Hola! Muchas gracias por sus respuestas! A ver, como dijo Jack el destripador: vamos por partes:

<div id="contenedor" style="height:100px;" >
<div id="uno" sytle="height:10px;"></div>
<div id="dos" style="height:contenedor.height-uno.height" ></div>
</div>

Benderzuelo, si pongo a div dos height:100% va a tomar los los 100px de contenedor ignorando los 10px de div uno D:

siddartha23, con javascript lo tengo resuelto con una funciòn en onLoad y en onResize tomando el offsetHeight de contenedor y uno, pero estoy casi seguro que existe una forma con css de hacerlo y la ignoro D:
Y la razòn por la que quiero esa medida (por ejemplo) es para dimensionar una imàgen en height contenida en div dos sin que rebase el margen de contenedor. Por ejemplo, dentro de div dos pongo una imagen con height:100% y listo, abarca el espacio restante en contenedor ( :


alzacon, exactamente a què te refieres con calc? En javascript o css?

Sarlit, muchas gracias por el enlace. Verè si encuentro lo que busco y les cuento.

Muchas gracias a todos.
Si alguno tiene otra idea es bienvenida ( :

Saludos

[andresgarciadev]

diria que con calc pero veo que la mencionaste asi que ya la debes conocer, imagino no la usas por compatibilidad, siendo ese el caso la pregunta seria para que necesitas q el segundo ocupe todo el espacio demas? es decir si es algo como que quieres q todo ese fondo sea de otro color bastaria con q el contenedor tenga ese color de fondo y el div uno tenga el otro y asi pareceria que el div de abajo ocupa todo de lo contrario lo unico q se me ocurre es con javascript como ya mencionaron, restando el tamaño del contenedor con el div 1 y asignandoselo a div 2

[siddartha23]

Si estas flotando los div 1 y 2 no olvides usar un clearfix...

[Kottore]

alzacon, eres un capo!!!

E calc resolviò todo sin problemas! Por si alguien llega a este hilo buscando la respuesta, quedò asì:

# divDos {
height:calc(100% - 120px);
}

Donde el 100% es el height de contenedor y 12px el height de uno