Foros del Web » Creando para Internet » CSS »

height 100% con position absolute

Estas en el tema de height 100% con position absolute en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/10/2009, 08:11
 
Fecha de Ingreso: octubre-2005
Mensajes: 240
Antigüedad: 12 años, 2 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.-
  #2 (permalink)  
Antiguo 16/10/2009, 14:47
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: height 100% con position absolute

Código css:
Ver original
  1. html, body{height:100&#37;;}
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!...
  #3 (permalink)  
Antiguo 18/10/2009, 15:11
 
Fecha de Ingreso: octubre-2005
Mensajes: 240
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: height 100% con position absolute

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
  #4 (permalink)  
Antiguo 18/10/2009, 18:20
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: height 100% con position absolute

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
  #5 (permalink)  
Antiguo 19/10/2009, 09:41
 
Fecha de Ingreso: octubre-2005
Mensajes: 240
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: height 100% con position absolute

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:18.