Tengo un problema con mi sitio http://artygirl.co.uk/pixie/about/ Parece que no consigo que el pie de página se adhiera automáticamente a la parte inferior del navegador, y muestro el resto de mi fondo. ¿Hay una solución mejor que usar la posición: fija o absoluta?css footer position stick to the bottom of browser?
Creo que posiblemente haya otros estilos que superen algunas de las pruebas que realizo en Firebug.
Gracias por su ayuda Saludos Judi
Esto siempre es un poco difícil, se puede aumentar la min-height de su área de contenido, pero incluso entonces, si alguien tiene una pantalla realmente grande que te ver la misma cosa .
Puede usar un poco de JavaScript para aumentar el min-height si alguien tiene una gran ventana pero eso aún no es tan elegante. No estoy seguro de si hay una solución solo de CSS para esto.
Si quiere probar lo anterior, el código que acabo de publicar aquí: Is detecting scrollbar presence with jQuery still difficult? puede ser útil para usted.
Puede establecer min-height en #content. Esto no arreglará específicamente el pie de página en la parte inferior del navegador, pero asegurará que siempre pueda ver una cierta cantidad del fondo.
Como alternativa, el uso de JavaScript, se puede determinar la altura de la ventana del navegador y luego calcular el min-height para #content, y aplicarlo usando JavaScript. Esto aseguraría que el pie de página esté siempre en el lugar correcto.
He utilizado la técnica en este artículo antes: CSS layout: 100% height with header and footer. Requiere un marcado adicional en su HTML.
WOW gracias, esto suena genial. Sin embargo, no me molestará mi tema así que podría intentarlo en uno diferente :) –
Eso es bastante astuto. Estoy en mi netbook, pero no puedo probarlo en otros navegadores, ¿hay alguno que no funcione? ¿IE6? – Steve
Acabo de implementar esta solución en mi nueva cartera :) – Steve
Lo he descubierto. Html tenía una propiedad css para el fondo diciendo que el color era blanco.
Establezca la altura de html y body al 100%, inserte un contenedor div con min-height 100% y posición relativa, y anide el pie de página con la posición: absolute, bottom: 0;
/* css */
html, body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div id="footer"></div>
</div>
</body>
</html>
Idéntico a lo que publicó Rory Fitzpatrick, menos la compatibilidad con IE6 y la demostración operativa. – Steve
Siempre prefiero los pies de página sabios debido al contenido variable en las páginas. Utilizo un margen superior de 5em para mis pies de página. La mayoría de las veces, sabemos la altura del contenido que puede ocurrir en las páginas.
CSS:
.podbar {
bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
height:35px;
}
HTML:
<div class="podbar">
Put your footer here
</div>
Esto creará una pegajosa que aparecerá siempre en la parte inferior de la página y superponer todo. Simplemente agregue un margen adicional/relleno en la parte inferior de los divisores de contenedores principales igual a la altura del pie de página +5px para que no se superponga a su contenido.
Funciona en casi todos los navegadores que he probado.
¿ha declarado la posición dos veces aquí? – iwayneo
@iwayneo Eso es probablemente a propósito. Parece que [CSS underscore hack] (http://en.wikipedia.org/wiki/CSS_filter#Underscore_hack), con explotaciones, un error de análisis para hacer que Internet Explorer 6 y siguientes lean diferentes estilos de versiones superiores y otros navegadores. –
Si utiliza la biblioteca Compass para Sass, también hay otra opción.Puede usar Compass's sticky-footer mixin (demo). Requiere que el pie de página sea de altura fija, y que su HTML tenga una cierta estructura general.
Aquí tienes un ejemplo y explicación http://ryanfait.com/sticky-footer/
¡El pie de página pegajoso de Ryan Fait es el mejor! – inorganik
No utilice position: absolute uso position: relative lugar.
.footer {
z-index:99;
position:relative;
left:0;
right:0;
bottom:0;
}
posición: absoluta se pegará a la parte inferior de la pantalla mientras que la posición relativa no ignorará otros divs, para que permanezca en la parte inferior de la página completa.
¡Maldición, me ganaste! – Josh
Ahora me siento decidido a encontrar una solución CSS única ;-) – Josh