El alto de una capa se queda corto...

Dude-- · #1 (**permalink**) 29/07/2011, 11:57

Buenas a todos,

Dudo si el problema es exclusivamente de CSS o también de javascript, igualmente en alguno de ambos subforos debía colocarlo, así que ahí va:

En la siguiente página: http://www.ncreativity.com/host/moure . Cuando haces que aparezca la barra de scroll vertical, desplazándote a las imágenes de la parte inferior de la web y luego haces click encima de una, la ventana que se "abre" para mostrarte la imagen en grande, no ocupa todo el alto de la página (si habéis bajado mucho tendréis que hacer scroll arriba para poder verla) y segundo no se posiciona en el punto de scroll que estamos de la web.

He estado pensando si podía ser que la "ventana" generada mediante javascript adquiriera el stilo CSS antes de llenarse con el contenido, pero estuve haciendo pruebas y parece que no es el caso. No consigo dar con la tecla y necesito vuestra ayuda.

Un saludo y gracias por vuestro tiempo.

mekhalil · #2 (**permalink**) 29/07/2011, 13:03

Buenas
Solo tienes que cambiar una linea en css
position: fixed;

Código HTML:

#ventana, #fondo {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

Espero que le haya servido

Dude-- · #3 (**permalink**) 29/07/2011, 14:44

Pues me ha servido y mucho, gracias. ¿Puedes explicarme porque debe usarse en este caso fixed y no absolute?

IsaBelM · #4 (**permalink**) 29/07/2011, 17:04

mientras que absolute muestra el elemento posicionado respecto al elemento contenedor (en tu caso body), fixed lo muestra respecto a la ventana visible del navegador. [URL="http://www.ignside.net/man/css/posicionamiento.php"]una explicación mas extensa/URL]

Dude-- · #5 (**permalink**) 30/07/2011, 01:10

Cita:

Iniciado por IsaBelM

mientras que absolute muestra el elemento posicionado respecto al elemento contenedor (en tu caso body), fixed lo muestra respecto a la ventana visible del navegador. [URL="http://www.ignside.net/man/css/posicionamiento.php"]una explicación mas extensa/URL]

Y si absolute posiciona el elemento respecto a body ¿por qué teniendo el primero height=100% no adquiría el mismo alto que su contenedor (body)?

IsaBelM · #6 (**permalink**) 30/07/2011, 05:06

por que el 100% del alto es el area visible de pantalla sin hacer scroll

un ejemplo tonto

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.contenedor100 {
width: 200px;
height:100%;
background-color:red;
left: 0;
position: absolute;
top: 0;
}
</style>
</head>
<body>

<div class="contenedor100">
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
</div>

</body>
</html>

si cambias height:100% por height:auto;, verás que el background-color continua aplicandose hasta el final del bloque

mekhalil · #7 (**permalink**) 30/07/2011, 05:26

Absolute posiciona el elemento respecto al body, se refiere a que se posiciona en body en tu caso has elegido top : 0, por lo tanto, en el inicio del body, por lo que, se queda en dicha posición. height=100% es el height del div que le estas dando estilo. Mientras que fixed se fija la posición respecto a la ventana del navegador, por eso cuando se hace el scroll por la pagina se queda en su posición. con fixed es necesario fijar la posición de altura donde quieres que el elemento se fije, en este caso posición es respeto a la ventana no el body.