2011-10-07 18 views
8

No tengo contenedores ni envoltorios.forzando pie de página quedarse en la parte inferior?

Simplemente tengo una disposición como tal ...

<body> 

<div id="header"> 
</div> 

<div id="left"> 
</div> 

<div id="right"> 
</div> 

<div class="clear"></div> 

<div id="footer"> 
</div> 

Lo que estoy queriendo hacer es asegurarse de que el pie siempre permanece en la parte inferior de la pantalla si tengo contenido que va bastante lejos y ni siquiera el contenido suficiente para recorrer todo el camino hasta la parte inferior de la pantalla.

En este momento, puedo hacer funcionar dos de las formas mencionadas anteriormente, pero quiero que ambas funcionen.

Aquí está el CSS que tengo configurado para esto.

html { 
height: 100%; 
} 

body { 
height: 100%; 
position: relative; 
} 

#footer { 
position: absolute; 
bottom: 0; 
} 

Soy consciente de que si aplico una altura mínima: 100%; al elemento HTML dentro del documento CSS que irá según vaya el contenido, pero si no tengo ningún contenido, per se, no se pegará en la parte inferior de la pantalla. Resolución independientemente

He encontrado este problema varias veces, y nunca estoy seguro de cómo resolverlo. Por lo tanto, sería muy útil recibir alguna ayuda, junto con alguna explicación.

¡Muchas gracias a todos por su ayuda!

+1

'pero si no tengo ningún contenido, por se' Pero al final se debe tener contenido, entonces, ¿qué importa? Realmente, a nadie le importa que su pie de página quede pegado al fondo, justo por debajo del contenido. No entiendo por qué la gente pierde tanto tiempo tratando de lograr un efecto tan inútil. – animuson

+1

@animuson: me importa si está pegado en la parte inferior. Sería ridículo sin que el pie de página se pegue en la parte inferior con mi diseño. Gracias por tu aporte. :) –

+0

posible duplicado de [Cómo fijar un pie de página en la parte inferior de la página] (http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom) –

Respuesta

8

uso de este compañero, que es una muy bien explicado y fácil de seguir tutorial:

http://code.google.com/p/cleanstickyfooter/

Mejor pie de página pegajoso nunca funciona realmente muy bien

Cita del sitio (y estoy de acuerdo completamente) :

La Diferencia

Goog le "pie de página adhesivo", he enumerado a continuación por qué esta técnica funciona mejor que los mejores resultados de esta búsqueda.

http://ryanfait.com/sticky-footer/ - Esta técnica es similar, pero cleanStickyFooter lleva mucho más lejos. La técnica que se encuentra aquí no funciona bien cuando desea que su pie de página tenga un ancho de 100%.

http://www.cssstickyfooter.com/ - Esta técnica es uno de muchos I me refiero a cuando digo que es invasivo con los cortes de CSS.

0

¿Desea que el pie de página se una al fondo del contenido independientemente de la cantidad de contenido, o en la parte inferior de la pantalla, independientemente de la cantidad de contenido?

Si es el primero, no se moleste en colocarlo: déjelo ir con el flujo de página después del contenido.

Si la segunda, posición de uso: fijo

Es posible que tenga que ser un poco más claro. ¿Qué rollos? ¿Encabezamiento? ¿Izquierda? ¿Derecha? ¿Pie de página? ¿Son parte izquierda y derecha de tu contenido general? ¿Por qué su cuerpo está en posición relativa? ¿Por qué tienes una "altura: 100%"? para html?

+0

Quiero que el pie de página se adjunte en la parte inferior del contenido y en la parte inferior del contenido, y si no hay suficiente contenido para que fluya a la parte inferior de la pantalla, quiero que quede pegado en la parte inferior de la pantalla , ¿Tiene sentido? No quiero hacer una posición fija porque de esa manera se mantendrá en la parte inferior de la pantalla independientemente de la cantidad de contenido que tenga, y en la que se requiera un margen y/o relleno aplicado a uno de los divs de contenido. Izquierda y Derecha son el contenido, más que Correcto. –

0

Puede echar un vistazo a la presentación especificada en this Artice by RyanFait

entre navegadores, y siempre funciona :)

+0

De Google arriba ... http://ryanfait.com/sticky-footer/ - Esta técnica es similar, pero cleanStickyFooter lleva mucho más lejos. La técnica que se encuentra aquí no funciona bien cuando desea que su pie de página tenga un ancho del 100%. –

Cuestiones relacionadas