Capa con width y height al 100% no mantiene el 100% cuando hay scroll

[Jeibi]

Hola,

creo que el título explica mas o menos lo que me ocurre. Lo explico con mas detalle:

en determinada acción de mi página, al hacer click sobre algo, le doy visibilidad a una capa que tengo oculta. Esta capa tiene un width:100% y un height:100%, porque le doy un porcentaje de trasparencia para que se vea el fondo, luego ahí aparecen otras cosas.

La cuestión es que sí, me aparece ocupando toda la ventana, pero si la ventana tiene scroll, al bajar con el scroll, como mi capa tiene otro color diferente del fondo de la página, pues se ve que está cortado.

Existe alguna forma de que esa capa ocupe la totalidad de la página haya scroll o no?

gracias y saludos

[cristian_cena]

No se si he entendido bien, pero supongo que puedes encararlo del seguiente modo:

#capa {
position:absolute:
top:0;
left:0;
z-index:/*solo si es necesario, y si lo es, el valor más alto*/;
width:100%;
height:100%;
}

Luego nos cuentas como te fue, y si es con código (html y css) mejor.

Saludos!

[danneg]

Deverias añadir display: fixed o background-attachment: fixed

[masterojitos]

Bueno este es un problema comun en programadores o diseñadores que no tienen mucha experiencia en proyectos de tal tipo........... no obstante.....

Asi le des a tu capa width:100% y height:100%...... no ocupara todo la web total, solo lo visible, es decir, como dices al mover con el scroll o bajas con las teclas..... salen espacios vacios......

la solucion seria con javascript obtener el alto total de la web....
en IE creo que es con:
Ancho total de documento = document.body.offsetWidth;
Alto total de documento = document.body.offsetHeight;
y en Firefox:
Ancho total de documento = window.outerWidth;
Alto total de documento = window.outerHeight;

aunque mas sencillo y eficas seria si te descargas el jquery, que es un framework de javascript, con utilidades super sencillas y muy buenas.... y ps ya tienes todo hecho:

$("#id_div").css({width: $(window).width() + 'px', height: $(window).height() + 'px'});


espero no te haya complicado y te ayude en tu duda.......

suerte.

[danneg]

No habia entendido el punto pero porque no le das posicion absoluta a la capa y estableces top, bottom, left y right a 0 y el width y height en auto

[Jeibi]

Hola,
gracias por vuestras respuestas.

Andaste cerca danneg, era tan simple como poner la capa con position:fixed.

saludos

[madson]

Buenas,

Bueno yo con position: fixed en ie creo que tube problemas, lo solucione con esto que es un manual tutorial o ayuda o lo que sea que cree el otro dia con un metodo que se me ocurrio, pero me imagino que la gente lo sabra.

--------------------------------------------\\\\\\\

Logica corriente,
# Usar un div con el siguiente style:

Código:

<style>
    position: absolute;
    
    top: 0px;
    left: 0px;
    
    width: 100%;
    height: 100%;
    
    background-color: #000;
    
    filter:alpha(opacity=60);
    moz-opacity:.60;
    opacity:.60;
    
    z-index: 50;
</style>

Resultado:


En la parte 1 el scroll de la pagina estaria arriba del todo, en este caso la capa transparente se veria bien,
pero en el momento que bajamos el scroll la capa sube con toda la web (por estar con top: 0px; en el momento que se usa el scroll la posicion 0 sube para arriba.

SOLUCION

Yo este problema lo soluciono de la siguiente forma,

1) Le damos el stylo a
html, body:

Código:

html, body {
       margin: 0px;

       position: relative;

       width: 100%;
       height: 100%;

      overflow: hidden;
}

Con esto asignamos a body que mida el total de la pagina y que el contenido que este fuera de esos limites no se monstrara.

Ahora creamos una capa que sera la que contendra toda la web(incluido el scroll)

Código:

<div id="Cuerpo">
....
</div>

le adjuntamos el style:

Código:

div#Cuerpo {
       position: absolute;

       top: 0px;
       left: 0px;

       width: 100%;
       height: 100%;

       overflow: scroll;

       overflow: auto;

       z-index: 1;
}

Bien, ahora por ultimo toca crear la capa transparente, está capa tendra que estar fuera del "<div id='Cuerpo'>..." por ejemplo lo colocaremos antes:

Código:

<div id="Trans" class="transparente"></div>

<div id="Cuerpo">.....

Tendremos que crear el stylo asignado a la capa transparente "div.transparente":

Código:

div.transparente {
       position: absolute;

       top: 0px;
       left: 0px;

       width: 100%;
       height: 100%;

       overflow: hidden;

       z-index: 99;
}

Bueno y con esto lo que tendriamos que conseguir seria algo asi:

CODIGO TERMINADO:

Código HTML:

<html>

<head>
<title>mTools</title>

<style>
html, body {
    margin: 0px;
    
    font-family: "Arial";
    
    position: relative;
    
    width: 100%;
    height: 100%;
    
    overflow: hidden
}
div#Cuerpo {
    position: absolute;
    
    top: 0px;
    left: 0px;
    
    width: 100%;
    height: 100%;
    
    overflow: auto;
    
    z-index: 1
}
div.transparente {
    position: absolute;
    
    top: 0px;
    left: 0px;
    
    width: 100%;
    height: 100%;
    
    background-color: #000;
    
    filter:alpha(opacity=60);
    moz-opacity:.60;
    opacity:.60;
    
    display: none;
    
    z-index: 50
}
</style>

<script language="javascript">

function capa(e){
    var e1 = document.getElementById(e).style.display;
    
    switch(e1){
        case 'block': document.getElementById(e).style.display = 'none'; break;
        case 'none': document.getElementById(e).style.display = 'block'; break;
        case '': document.getElementById(e).style.display = 'block'; break;
    }
}

</script>
</head>


<body>
<div id="Trans" class="transparente" onclick="capa('Trans')"></div>

<div id="Cuerpo">

<a href="javascript: capa('Trans');">Abrir Capa</a>
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />

<a href="javascript: capa('Trans');">Abrir Capa</a>

<br />
<br />

design by <b style="color: green">Dr perejil</b>
</div>
</body>
</html> 

y nada con esto termino,

Un saludo y espero haber resuelto tu duda.