Foros del Web » Creando para Internet » CSS »

El alto de una capa se queda corto...

Estas en el tema de El alto de una capa se queda corto... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/07/2011, 12:57
Avatar de Dude--  
Fecha de Ingreso: junio-2004
Ubicación: Sevilla - España
Mensajes: 197
Antigüedad: 12 años, 6 meses
Puntos: 4
El alto de una capa se queda corto...

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.
__________________
"El camino empieza renunciando el control y volviéndose flexibles, como una brizna de paja en un huracán."

"Desconozco tanto... es excitante comenzar a nadar en este mar de dudas..."
  #2 (permalink)  
Antiguo 29/07/2011, 14:03
 
Fecha de Ingreso: septiembre-2010
Ubicación: leon
Mensajes: 8
Antigüedad: 6 años, 3 meses
Puntos: 1
Respuesta: El alto de una capa se queda corto...

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
  #3 (permalink)  
Antiguo 29/07/2011, 15:44
Avatar de Dude--  
Fecha de Ingreso: junio-2004
Ubicación: Sevilla - España
Mensajes: 197
Antigüedad: 12 años, 6 meses
Puntos: 4
Respuesta: El alto de una capa se queda corto...

Pues me ha servido y mucho, gracias. ¿Puedes explicarme porque debe usarse en este caso fixed y no absolute?
__________________
"El camino empieza renunciando el control y volviéndose flexibles, como una brizna de paja en un huracán."

"Desconozco tanto... es excitante comenzar a nadar en este mar de dudas..."
  #4 (permalink)  
Antiguo 29/07/2011, 18:04
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 7 meses
Puntos: 1008
Respuesta: El alto de una capa se queda corto...

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]
  #5 (permalink)  
Antiguo 30/07/2011, 02:10
Avatar de Dude--  
Fecha de Ingreso: junio-2004
Ubicación: Sevilla - España
Mensajes: 197
Antigüedad: 12 años, 6 meses
Puntos: 4
Respuesta: El alto de una capa se queda corto...

Cita:
Iniciado por IsaBelM Ver Mensaje
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)?
__________________
"El camino empieza renunciando el control y volviéndose flexibles, como una brizna de paja en un huracán."

"Desconozco tanto... es excitante comenzar a nadar en este mar de dudas..."

Última edición por Dude--; 30/07/2011 a las 02:22
  #6 (permalink)  
Antiguo 30/07/2011, 06:06
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 7 meses
Puntos: 1008
Respuesta: El alto de una capa se queda corto...

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
  #7 (permalink)  
Antiguo 30/07/2011, 06:26
 
Fecha de Ingreso: septiembre-2010
Ubicación: leon
Mensajes: 8
Antigüedad: 6 años, 3 meses
Puntos: 1
Respuesta: El alto de una capa se queda corto...

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.

Etiquetas: alto, contenido, queda, capas
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 10:57.