Problema con height 100%

kenproxd · #1 (**permalink**) 07/03/2012, 08:56

Hola de nuevo,

Esta vez tengo problemas con un div que tiene como fondo a un personaje. Resulta que al darle height 100% este div toma la altura de parte de la página que se logra ver en la pantalla (es decir, no cuenta lo que está bajando el scroll). Dejo imágenes para explicarme mejor.

Así se ve al abrir la página.

Al bajar el scroll se ve que el div no cubrió el total del height de la página.

Código CSS:

Ver originalhtml, body {
    margin: 0;
    background:#000  url(images/au_bg.jpg) center no-repeat fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    height: 100%; 
    position: relative;
}
 
#pj {
    position: absolute;
    top: 0px;
    height: 100%;
    left: 3%;
    z-index: 1;
    width: 624px;
    background: url(images/ko_pj.png) no-repeat center center;
    overflow: hidden;
}

Código HTML:

Ver original<body>
<div id="pj"></div>
....
</body>

Intenté poniéndole height: 100% al body pero al hacerlo el scroll simplemente desaparece.

Espero puedan ayudarme.

cristian_cena · #2 (**permalink**) 07/03/2012, 13:42

Cita:

Al bajar el scroll se ve que el div no cubrió el total del height de la página.

Si no me equivoco es porque ese 100% se aplica sobre la ventana (objeto window)
Tal vez aquí no sea conveniente incluir la imagen como fondo. Sino, en cambio. trabajar la imagen dentro de un <img> y apilarlo con z-index de modo que te quede como capa de fondo.

Si desconoces el alto que tendrá tu documento podes echar mano al método outerHeight() de jquery (javascript) con el que podrias seleccionar facilmente la altura de la ventana, del documento o de una caja (body, div, #id, etc).

Código Javascript:

Ver original//requiere jquery
body = $("body").outerHeight()      //devuelve altura de la caja body
documento = $(document).outerHeight() //devuelve altura del documento
ventana = $(window).outerHeight()    //devuelve altura de la ventana
//alert(documento);

conocida la altura, podes aplicarla a tu imagen, ejemplo:

Código Javascript:

Ver originalalturaDocumento = $(document).outerHeight() 
$("#capa_img").css({"height" : alturaDocumento });

y asi ir jugando con esto.
o bien utilizar un plugin tipo "scalin image", ejemplo este: http://www.aaronvanderzwan.com/maximage/

Saludos.

kenproxd · #3 (**permalink**) 07/03/2012, 14:15

muchas gracias!, funcionó perfecto