Cómo arreglar el pie de página en la parte inferior de la página

Código CSS

html,

cuerpo{

altura: 100%; p>

margen:0;

relleno:0;

}

#contenedor {

altura mínima : 100 %;

altura: ¡auto!

altura: auto !importante;

altura: 100%;

margen: 0 auto -60px;/* El valor negativo del margen inferior es igual al pie de página La altura*

}. .push,

#footer {

alto: 60px;

claro: ambos;

}

/*========== Otros efectos div==========

#header {

padding: 10px;

fondo: lima;

}

#left {

ancho: 18%;

flotador: izquierda; p>

margen derecho: 2%;

fondo: naranja;

}

#content{

ancho: 60%;

flotante: izquierda;

margen-derecho: 2%;

fondo: verde;

}

#right {

ancho: 18%;

flotante: izquierda;

fondo: amarillo;

}

#footer {

antecedentes:

En comparación con los dos primeros métodos, el método tres y el método dos son más similares. Ambos colocan div#footer fuera del contenedor div#container, y este método también agrega un div.push en el contenedor div#container para empujar div#footer hacia abajo. A continuación aprenderemos cómo implementar este método El pie de página siempre está anclado. la parte inferior de la página.

1. Etiquetas y : las etiquetas html y body son las mismas que los dos primeros métodos. Debe configurar "altura: 100%" y restablecer "margen" y cambiar ". margin" y "padding" se restablecen a 0;

2.div#container: la parte clave del método tres es la configuración de div#container. Primero, debe establecer su altura mínima (mín. altura) al 100% para que sea compatible con IE6 y luego establezca su altura mínima en 100% para que sea compatible con IE6. Para ser compatible con IE6, debe realizar el procesamiento de compatibilidad en la altura mínima (consulte las instrucciones o el código anteriores para conocer los métodos de procesamiento específicos). Además, aquí hay un punto clave: debe configurar el margen inferior. div# contenedor contenedor y asígnele un valor Negativo, y el tamaño de este valor es igual a la altura de div#footer y div.push. Si div#footer y div.push no están configurados, no se configurarán. Si div#footer y div.push tienen valores de relleno y borde establecidos, entonces el valor negativo de margin-bottom en div#container debe agregarse a los valores de relleno y borde de div#footer y div.push. Esto significa "div#container{margin-bottom:-[div#altura del pie de página+relleno+borde] o -[altura de div.push+relleno+borde]}". En resumen: el valor negativo del margen inferior de div#container debe ser el mismo que la altura de div#footer y div.push (si hay relleno o borde, se debe agregar el valor de altura

<); p>3. div.push: En div.push no debemos poner push: En div.push no debemos poner nada. No debemos colocar nada en div.push, el div debe colocarse en la parte inferior del contenedor div#container, su altura debe ser igual al valor de div#footer, es mejor agregar clear:both a Limpiar los flotadores.

4.

4. Contenedor div#footer: el contenedor div#footer es el mismo que el método dos, no se puede colocar dentro del div#container y el contenedor div#container es el igual que div#container El contenedor está al mismo nivel. Si necesita establecer el espacio entre el elemento y el pie de página, es mejor usar relleno en lugar de valor de margen.

Ventajas:

Simple, fácil de entender y compatible con todos los navegadores.

Desventajas:

En comparación con los dos primeros métodos, el método de utilizar el contenedor div.push también limita la altura de la parte del pie de página y no puede lograr el efecto de altura adaptable.

Si quieres aprender más sobre el Método 3, puedes hacer clic aquí o descargar el código directamente desde la DEMO.

Método 4:

Los primeros tres métodos no requieren la ayuda de ningún javaScript o jQuery, lo que nos permite conseguir el efecto de que el pie de página siempre esté fijo en la parte inferior de la página. Los primeros tres métodos Si bien no contamos con la ayuda de algo como jQuery, agregamos marcado HTML adicional para lograr el efecto. Si se omiten estas etiquetas HTML, será más difícil lograr el efecto. En este momento, usar jQuery o javaScript para ayudar a lograrlo es un buen método. Veamos el cuarto método juntos, usando jQuery para lograr el pie de página siempre Fijo. efecto al final de la página.

Etiqueta HTML

Aquí no estamos agregando etiquetas HTML inútiles, y en este punto solo asegúrese de que el div#footer esté al final del cuerpo; también puede agregar contenido en el cuerpo.

Código CSS

*{margin: 0;padding:0;}

.clearfix:antes,

.clearfix:después {

contenido:"";

display:table;

}

.clearfix:después de {

clear:ambos;

}

p>

zoom:1; /* IE <8 */

}?

#pie de página {

altura: 60px;

fondo ：#fc6;

ancho: 100%;

}

/*========== otro div===== =====*/

#header {

relleno: 10px;

fondo: lima;

}

#left {

ancho: 18%;

flotante: izquierda;

margen derecho: 2%

fondo: naranja;

}

#content{

ancho: 60%;

flotación: izquierda;

margen-derecho: 2%;

fondo: verde

}

#right {

ancho: 18% ;

float: izquierda;

fondo: amarillo;

}

Este método no depende tanto de CSS como el primero Tres métodos, pero puedes escribir los estilos que quieras utilizar de la forma habitual. Es necesario escribir el estilo, pero una cosa que necesita atención especial es que en HTML, la altura del cuerpo no se puede establecer al 100%; de lo contrario, este método no funcionará correctamente si configura la altura en div#footer y configura el. ancho al 100%, será más infalible.

Código jQuery

Usando el jQuery anterior. código, puede lograr fácilmente que el pie de página siempre esté fijo en la parte inferior de la página. Al utilizar este método, debe prestar atención a los siguientes puntos

1. Asegúrese de que la biblioteca de recursos jQuery se haya introducido correctamente y que el código jQuery anterior se haya llamado correctamente

; 2. Asegúrese de que

Ubicado al final del texto

3. Asegúrese de que la altura en html y el cuerpo no esté configurada al 100%.

Ventajas:

Estructura simple, sin necesidad de agregar etiquetas inútiles, compatible con todos los navegadores, sin necesidad de escribir estilos especiales. Los pies de página no pueden tener una altura fija.