hola a todos, estoy haciendo experimentos con jQuery, la verdad es que es bien facil de usar. Bueno, mi problema radica en que necesito hacer como una ventana tipo windows, me refiero a lo siguiente:
-un div contenedor el cual lleva las propiedades de drag y resize del jQuery, y un pequeño padding con CSS.
-dentro de este div, tengo otro div de ancho fijo, que seria como una barra de titulo, el cual se expande fluidamente a todo lo ancho a medida que el DIV padre (el anterior) se le hace un resize.
-debajo del DIV anterior, tengo un iframe el cual va a cargar X pagina web o archivo .html o.php; este señor es el del problema.
A continuacion el codigo HTML, para efectos de prueba, estoy usando el CSS con el atributo style de los objetos.
Código:
<body>
<div id="draggable" style="width:400px; height:400px; border:1px solid #060; background-color:#0F0; position:fixed; top:200px; left:100px; padding:10px;">
<div style="height:20px; background-color:#F00; border:1px solid #FF0; margin:0px 0px 10px 0px;">
titulo
</div>
<div style="height:100%;">
<iframe src="http://www.google.com" frameborder="0" style="width:100%; height:100%; border:0px;"></iframe>
</div>
</div>
</body>
Al div de titulo le omití el width para que sea fluido con respecto al div padre, y funciona perfecto al hacerle un resize al div padre.
Al segundo div, tambien le omito el width para que se ajuste fluidamente al div padre, y asi mismo le digo al iframe que se ajuste al 100% del ancho, y esto trabaja perfecto al momento de hacer un resize del div padre.
El problema es que al decirle al 2do DIV que tenga un alto de 100%, este agarra la altura que tiene actualmente el DIV padre, y se sale del div padre (como superponiendose).
El iframe por otra parte, se ajusta perfectamente a la altura del div que lo contiene, pero obviamente al tener este DIV una altura inadecuada, el iframe no se muestra como deberia de ser (dentro del div padre).
¿Como hago para que ese 2do div ocupe de forma fluida la altura del DIV padre? sin superponerse al borde inferior y respetando el padding
No es un problema del html, body, ya que he implantado la solucion que algunos ponen de colocar un height del 100% para estos atributos, para lo que no ha habido ningun cambio.
Tambien he intentado eliminando el div que contiene el iframe, es decir que el div padre contenga el div de titulo y posteriormente un iframe, y sucede lo mismo; el iframe agarra la altura del div padre, y se superpone al borde inferior de este div.
