height 100% con position absolute

[urameshix]

Hola a todos!

Posteo ya como último recurso, pues no encuentro la santa manera de arreglar un problema que tengo con el CSS. Es un ejemplo de lightbox.

Resulta que tengo dos capas al principio de todo el código con sus respectivos estilos:

Código:

<div id="capaVentana">LIGHTBOX CONTENIDO</div>

<div id="capaFondo1"></div>

#capaVentana {
width:600px;
visibility:hidden;
position:absolute;
padding:0px;
left:50%;
top:20px;
margin-left:-300px;
z-index:3;
}

#capaFondo1 {
min-height: 100%;
height: auto !important;
height: 100%;
visibility:hidden;
position:absolute;
background-color:black;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
padding:0px;
left:0px;
top:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
z-index:2;
}

Lo que hago es modificar con javascript la aparición de estas capas para crear un efecto de LIGHTBOX. Como se puede apreciar ambas capas son Absolute y todo funciona bien, hasta que el contenido de la web sobrepasa el height 100% establecido por la configuración de la pantalla. Cuando pasa eso, el efecto de negro transparente de la capa de fondo se corta y pasa a quedar blanco. Es un poco chapuza.

¿Como puedo corregirlo?

¿Algún consejo útil?

Un saludo.-

[alexk]

Código css:

html, body{height:100%;}
 

estoy un 30% seguro... sino pon mas codigo ya que solo con eso en teoria no debe haber problema (segun mi firebug mental)... o bien la URL del problema seria mucho mejor chao y suerte!...

[urameshix]

Poner height:100% al body y al html lo probé también pero no me funciona. Alguna otra idea?

Aquí pongo un ejemplo con una capa roja, lo que yo quiero hacer es que dependiendo del contenido se alargue aun más y cubra toda la página.

http://72.233.34.74/prueba.htm

Un saludo

[alexk]

puedes mirar por aqui
http://araudi.net/ejemplos/simulacion_tabla.html
y si no lo consigues puedes hacerlo con position fixed y para ie6
http://araudi.net/ejemplos/IE6fixed.html

[urameshix]

Encontré la solución.

Cansado de buscar y rebuscar la manera de como hacerlo en CSS me decanté por Javascript y lo solucioné en dos segundos:

document.getElementById("capaFondo1").style.height = document.body.scrollHeight;

Espero que le sirva a alguien en el futuro.

Un saludo