Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Capa con width y height al 100% no mantiene el 100% cuando hay scroll en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/12/2009, 08:53
 
Fecha de Ingreso: noviembre-2007
Ubicación: Madrid
Mensajes: 96
Antigüedad: 10 años
Puntos: 2
Capa con width y height al 100% no mantiene el 100% cuando hay scroll

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
  #2 (permalink)  
Antiguo 02/12/2009, 19:50
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Capa con width y height al 100% no mantiene el 100% cuando hay scroll

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!
  #3 (permalink)  
Antiguo 02/12/2009, 23:15
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Capa con width y height al 100% no mantiene el 100% cuando hay scroll

Deverias añadir display: fixed o background-attachment: fixed
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #4 (permalink)  
Antiguo 02/12/2009, 23:35
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Capa con width y height al 100% no mantiene el 100% cuando hay scroll

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.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #5 (permalink)  
Antiguo 03/12/2009, 07:58
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Capa con width y height al 100% no mantiene el 100% cuando hay scroll

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
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #6 (permalink)  
Antiguo 03/12/2009, 10:56
 
Fecha de Ingreso: noviembre-2007
Ubicación: Madrid
Mensajes: 96
Antigüedad: 10 años
Puntos: 2
Respuesta: Capa con width y height al 100% no mantiene el 100% cuando hay scroll

Hola,
gracias por vuestras respuestas.

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

saludos
  #7 (permalink)  
Antiguo 21/12/2009, 08:28
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Capa con width y height al 100% no mantiene el 100% cuando hay scroll

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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 06:38.