No consigo lograr height 100% de una capa

mdromed · #1 (**permalink**) 20/05/2012, 14:22

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:

IsaBelM · #2 (**permalink**) 20/05/2012, 14:38

en lugar de position: absolute, position: fixed

keko123 · #3 (**permalink**) 21/05/2012, 09:01

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';

mdromed · #4 (**permalink**) 21/05/2012, 13:47

Cita:

Iniciado por IsaBelM

en lugar de position: absolute, position: fixed

Coño! No habia caido en eso!
VA PERFECTO ......Muchas gracias!

IXtremeLT · #5 (**permalink**) 21/05/2012, 23:56

Otro truco es ponerle a la capa un left: 0, top:0, right:0, bottom:0, saludos!

keko123 · #6 (**permalink**) 22/05/2012, 09:26

Cita:

Iniciado por IXtremeLT

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.

IXtremeLT · #7 (**permalink**) 23/05/2012, 08:23

Cita:

Iniciado por keko123

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<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    *{
        margin: 0;padding:0;
    }
    #contain{
         position:relative;
    }
    #modal{
         background: red;
         position: absolute;
         opacity: 0.5;
         width:100%;
         height:100%;
         /* O tambien utilizar en vez de width y height */
         /*top: 0;
         right: 0;
         bottom: 0;
         left: 0;*/
    }
    </style>
</head>
<body>
<div id='contain'>
<div id='modal'></div>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<div>
</body>
</html>

Saludos!

keko123 · #8 (**permalink**) 24/05/2012, 06:59

Cita:

Iniciado por IXtremeLT

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<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    *{
        margin: 0;padding:0;
    }
    #contain{
         position:relative;
    }
    #modal{
         background: red;
         position: absolute;
         opacity: 0.5;
         width:100%;
         height:100%;
         /* O tambien utilizar en vez de width y height */
         /*top: 0;
         right: 0;
         bottom: 0;
         left: 0;*/
    }
    </style>
</head>
<body>
<div id='contain'>
<div id='modal'></div>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<div>
</body>
</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