HTML/CSS Alinear DIV al pie de la página y la pantalla - lo que ocurra primero

tengo un div:HTML/CSS Alinear DIV al pie de la página y la pantalla - lo que ocurra primero

clear:both; 
position:absolute; 
bottom:0; 
left:0; 
background:red; 
width:100%; 
height:200px;

Y un html, body:

html, body { 
    height:100%; 
    width:100%; 
} 


/* Body styles */ 
body { 
    background:url(../images/background.png) top center no-repeat #101010; 
    color:#ffffff; 
}

Mi código es básicamente ipsum 20 Loren párrafos seguidos por el div.

Ahora Traté posición de ajuste a relativa y absoluta y etc, pero con absoluta el div se adhiere a la parte inferior de la pantalla de modo que cuando se desplaza hacia abajo los scrols div con él

He intentado establecer a relación pero cuando no hay suficiente contenido para hacer que la página se desplace, el div no está en la parte inferior de la página.

He intentado fijo, sino que simplemente se fija .. no me sirve

¿Cómo puedo obtener el div a ser en la parte inferior de la pantalla y la página en función de si tener o no desplazarse

Fuente

2011-06-22 Ozzy

http://www.cssstickyfooter.com/ – Marcel

Suena como el pie de página pegajoso tradicional es exactamente lo contrario de lo que el autor de la pregunta quiere. –

He actualizado mi comentario a continuación. –

Ok, fijo y en funcionamiento: D Espero que haga lo que usted quiere. vista previa aquí: http://jsfiddle.net/URbCZ/2/

<html> 
    <body style="padding:0;"> 
     <div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; "> 
      test content :D 
     </div> 
     <!--Content Here--> 
    </div> 
    </body> 
</html>

Fuente

2011-06-23 00:07:37

¿Qué hay de la parte oculta del contenido? ¿Hay alguna forma de prevenir esto? – Guillaume

Gracias, esto funciona para mí – blackhawk

Usted necesita una solución javascript: parte fija y parte en línea o absoluta con js para decidir. ¿Es jQuery una opción aquí? Aquí hay un screencast: http://jqueryfordesigners.com/fixed-floating-elements/

Fuente

2011-06-22 23:43:56 natedavisolds

HTML/CSS Alinear DIV al pie de la página y la pantalla - lo que ocurra primero

Respuesta

Cuestiones relacionadas