Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/10/2009, 07:11
urameshix
 
Fecha de Ingreso: octubre-2005
Mensajes: 240
Antigüedad: 18 años, 7 meses
Puntos: 1
height 100% con position absolute

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