Foros del Web » Creando para Internet » CSS »

No consigo lograr height 100% de una capa

Estas en el tema de No consigo lograr height 100% de una capa en el foro de CSS en Foros del Web. Os cuento: Tengo la pagina web original: Visualizo justo encima una capa semitransparente que ocupe toda la ventana con este css: Código: div#capaTransparente{ position: absolute; ...
  #1 (permalink)  
Antiguo 20/05/2012, 14:22
Avatar de mdromed  
Fecha de Ingreso: septiembre-2009
Mensajes: 389
Antigüedad: 15 años, 1 mes
Puntos: 8
No consigo lograr height 100% de una capa

Os cuento:

Tengo la pagina web original:



Visualizo justo encima una capa semitransparente que ocupe toda la ventana con este css:

Código:
div#capaTransparente{
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    -khtml-opacity: 0.8;
   z-index: 999;
}
Y queda asi:


Hasta aqui todo bien.

Lo que me pasa es que cuando muevo el scroll al fondo de la pagina veo que la capaTransparente no cubre la totalidad del contenido del body, es decir, solo tapa lo que ocupa la ventana, pero cuando bajas el scroll no.

Se ve asi:
  #2 (permalink)  
Antiguo 20/05/2012, 14:38
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 4 meses
Puntos: 1012
Respuesta: No consigo lograr height 100% de una capa

en lugar de position: absolute, position: fixed
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 21/05/2012, 09:01
 
Fecha de Ingreso: marzo-2012
Mensajes: 43
Antigüedad: 12 años, 7 meses
Puntos: 3
Respuesta: No consigo lograr height 100% de una capa

Hola, yo tengo el mismo problema, tambien lo habia intentado con position fixed pero entonces si la imagen que muestro en la capa es mas larga que la propia capa la imagen no se ve entera.

Creo que lo he solucionado añadiendo estas lineas de javascript

document.getElementById('capa_ampliar').style.heig ht = document.body.parentNode.scrollHeight+'px';
document.getElementById('capa_ampliar').style.widt h = document.body.parentNode.scrollWidth+'px';

Última edición por keko123; 21/05/2012 a las 10:09
  #4 (permalink)  
Antiguo 21/05/2012, 13:47
Avatar de mdromed  
Fecha de Ingreso: septiembre-2009
Mensajes: 389
Antigüedad: 15 años, 1 mes
Puntos: 8
Respuesta: No consigo lograr height 100% de una capa

Cita:
Iniciado por IsaBelM Ver Mensaje
en lugar de position: absolute, position: fixed
Coño! No habia caido en eso!
VA PERFECTO ......Muchas gracias!

Última edición por mdromed; 21/05/2012 a las 14:31
  #5 (permalink)  
Antiguo 21/05/2012, 23:56
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 13 años, 4 meses
Puntos: 32
Respuesta: No consigo lograr height 100% de una capa

Otro truco es ponerle a la capa un left: 0, top:0, right:0, bottom:0, saludos!
  #6 (permalink)  
Antiguo 22/05/2012, 09:26
 
Fecha de Ingreso: marzo-2012
Mensajes: 43
Antigüedad: 12 años, 7 meses
Puntos: 3
Respuesta: No consigo lograr height 100% de una capa

Cita:
Iniciado por IXtremeLT Ver Mensaje
Otro truco es ponerle a la capa un left: 0, top:0, right:0, bottom:0, saludos!
A mi me sigue pasando lo mismo, si el contenido de la capa es mayor que el tamaño de la web justo antes de mostrar la capa, no me ocupa el total.
  #7 (permalink)  
Antiguo 23/05/2012, 08:23
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 13 años, 4 meses
Puntos: 32
Respuesta: No consigo lograr height 100% de una capa

Cita:
Iniciado por keko123 Ver Mensaje
A mi me sigue pasando lo mismo, si el contenido de la capa es mayor que el tamaño de la web justo antes de mostrar la capa, no me ocupa el total.
A si, prueba dandole al body position relative o al contendor de la pagina(si es q tienes).

Aqui tienes un ejemplo

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.     <style type="text/css">
  3.     *{
  4.         margin: 0;padding:0;
  5.     }
  6.     #contain{
  7.          position:relative;
  8.     }
  9.     #modal{
  10.          background: red;
  11.          position: absolute;
  12.          opacity: 0.5;
  13.          width:100%;
  14.          height:100%;
  15.          /* O tambien utilizar en vez de width y height */
  16.          /*top: 0;
  17.          right: 0;
  18.          bottom: 0;
  19.          left: 0;*/
  20.     }
  21.     </style>
  22. </head>
  23. <div id='contain'>
  24. <div id='modal'></div>
  25. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  26. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  27. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  28. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  29. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  30. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  31. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  32. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  33. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  34. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  35. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  36. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  37. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  38. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  39. <div>
  40. </body>
  41. </html>

Saludos!
  #8 (permalink)  
Antiguo 24/05/2012, 06:59
 
Fecha de Ingreso: marzo-2012
Mensajes: 43
Antigüedad: 12 años, 7 meses
Puntos: 3
Respuesta: No consigo lograr height 100% de una capa

Cita:
Iniciado por IXtremeLT Ver Mensaje
A si, prueba dandole al body position relative o al contendor de la pagina(si es q tienes).

Aqui tienes un ejemplo

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.     <style type="text/css">
  3.     *{
  4.         margin: 0;padding:0;
  5.     }
  6.     #contain{
  7.          position:relative;
  8.     }
  9.     #modal{
  10.          background: red;
  11.          position: absolute;
  12.          opacity: 0.5;
  13.          width:100%;
  14.          height:100%;
  15.          /* O tambien utilizar en vez de width y height */
  16.          /*top: 0;
  17.          right: 0;
  18.          bottom: 0;
  19.          left: 0;*/
  20.     }
  21.     </style>
  22. </head>
  23. <div id='contain'>
  24. <div id='modal'></div>
  25. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  26. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  27. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  28. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  29. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  30. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  31. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  32. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  33. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  34. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  35. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  36. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  37. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  38. <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
  39. <div>
  40. </body>
  41. </html>

Saludos!
Muchisimas gracias, me ha ido perfecto. Ahora la capa_ampliar si ocupa toda la pantalla indistintamente del tamaño del contenido.

Un saludo

Etiquetas: height
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 05:00.