javascript - pagina - ¿Cómo puedo obtener un pie de página flotante para pegarme en la parte inferior de la ventana gráfica en IE 6?

footer siempre abajo jquery (6)

Si el pie de página tiene una altura fija y lo sabe y puede codificarlo en CSS, puede hacerlo así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> .content { position : absolute; top : 0; left : 0; right : 0; bottom : 50px; /* that''s the height of the footer */ overflow : auto; background-color : blue; } .footer { position : absolute; left : 0; right : 0; bottom : 0px; /* that''s the height of the footer */ height : 50px; overflow : hidden; background-color : green; } </style> </head> <body> <div class="content"> everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here </div> <div class="footer"> the footer </div> </body> </html>

Sé que esto sería fácil con la posición: fijo, pero desafortunadamente tengo que soportar IE 6. ¿Cómo puedo hacer esto? Prefiero usar CSS para estar limpio, pero si tengo que usar Javascript, ese no es el fin del mundo. En mi implementación actual, tengo un "pie de página flotante" que flota sobre el área de contenido principal y está posicionado con Javascript. La implementación que tengo ahora no es particularmente elegante incluso con el Javascript, por lo que mis preguntas son:

¿Hay alguna manera de hacer esto sin Javascript?
Si tengo que usar Javascript, ¿hay alguna solución "agradable" para este problema de pie de página flotante? Por "agradable" me refiero a algo que funcionará en todos los navegadores, no sobrecarga los recursos del navegador (ya que tendrá que volver a calcular a menudo), y es elegante / fácil de usar (es decir, sería bueno escribir algo como new FloatingFooter("floatingDiv") ).

Voy a adivinar que no hay una solución súper fácil que tenga todo lo anterior, pero algo de lo que puedo construir sería genial.

Finalmente, solo una pregunta más general. Sé que este problema es muy difícil de resolver, entonces, ¿qué otras alternativas de UI hay en lugar de tener un contenido de pie de página al final de cada página? En mi sitio particular, lo uso para mostrar las transiciones entre los pasos. ¿Hay otras formas en que podría hacer esto?

Esto puede funcionar para usted. Funciona en IE6 y Firefox 2.0.0.17 para mí. Dale un tiro. Hice la altura del pie de página muy alto, solo por el efecto. Obviamente lo cambiarías a lo que necesitas. Espero que esto funcione para ti.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Liquid Footer</title> <style type="text/css"> .footer { background-color: #cdcdcd; height: 180px; text-align: center; font-size:10px; color:#CC0000; font-family:Verdana; padding-top: 10px; width: 100%; position:fixed; left: 0px; bottom: 0px; } </style>  </head> <body> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> <div class="footer">-- This is your liquid footer --</div> </body> </html>

$(function(){ positionFooter(); function positionFooter(){ if($(document).height() < $(window).height()){//Without the body height conditional the footer will always stick to the bottom of the window, regardless of the body height, $(document).height() - could be main container/wrapper like $("#main").height() it depend on your code $("#footer").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#footer").height())+"px"}) } } $(window).scroll(positionFooter); $(window).resize(positionFooter); });

Lo he hecho usando expresiones CSS en el pasado.

Pruebe algo como esto:

.footer { position: absolute; top: expression((document.body.clientHeight - myFooterheight) + "px"); }

leer más aquí
y aquí

Si coloca la height al 100% y overflow: auto a las etiquetas <html/> y <body/> , todo lo que tenga la posición absoluta quedará reparado. Es el más básico para es bastante funky con barras de desplazamiento extrañamente colocadas, pero se puede ajustar a resultados decentes. ejemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> html, body { height: 100%; overflow: auto; } .fixed { position: absolute; bottom: 0px; height: 40px; background: blue; width: 100%; } </style> </head> <body> <div class="fixed"></div> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> </body> </html>

si no desea usar los comentarios condicionales, para poder poner el CSS en un archivo separado, use !important . Algo como esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> html { overflow-x: auto; overflow-y: scroll !important; overflow-y: hidden; /* ie6 value b/c !important ignored */ } body { padding:0; margin:0; height: 100%; overflow-y: hidden !important; overflow-y: scroll; /* ie6 value b/c !important ignored */ } #bottom { background-color:#ddd; position: fixed !important; position: absolute; /* ie6 value b/c !important ignored */ width: 100%; bottom: 0px; z-index: 5; height:100px; } #content { font-size: 50px; } </style> </head> <body> <div id="bottom"> keep this text in the viewport at all times </div> <div id="content"> Let''s create enough content to force scroll bar to appear. Then we can ensure this works when content overflows. One quick way to do this is to give this text a large font and throw on some extra line breaks. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> </div> </body> </html>