La idea básica es

considerar primero configurar un div contenedor en la capa exterior, con la identificación establecida en #container, de modo que su altura sea la altura de la ventana del navegador, y luego configurar el div #footer como un div secundario de # contenedor, y use posicionamiento absoluto para hacerlo. Se fija al extremo inferior del #contenedor para lograr el efecto deseado.

Haga clic aquí para ver el efecto de la página del caso. Cambie la altura y el ancho del navegador para ver el efecto de la parte del pie de página.

Implementación del código

: Primero considere la estructura HTML. El código HTML de esta página de demostración es muy simple.

cuerpo,html {
margen: 0;
relleno: 0;
fuente: 12px/1,5 arial;
altura: 100%;
}
#contenedor {
altura mínima: 100%;
posición: relativa;
}
#contenido {
relleno: 10px;
fondo de relleno: 60px;
/* 20px(tamaño de fuente)x2(alto de línea) + 10px(relleno)x2=60px*/
}
#pie de página {
posición: absoluta;
abajo: 0;
relleno: 10px 0;
color de fondo: #AAA;
ancho: 100%;
}
#pie de página h1 {
fuente: 20px/2 Arial;
margen:0;
relleno: 0 10px;
}
1: Primero, establezca la altura (atributo de altura) de los elementos html y del cuerpo al 100% (línea 5). Esto primero garantizará que la altura del elemento raíz llene toda la ventana del navegador, y luego la altura de #container puede. llenar toda la ventana del navegador. En cuanto a por qué los elementos html y body se configuran al mismo tiempo, es porque Firefox e IE consideran que el elemento raíz es diferente, por lo que se configuran aquí.

2: Luego establezca la altura de #container en 100% (línea 8), pero tenga en cuenta que aquí se usa el atributo "min-height" en lugar del atributo de altura normal. Esto se debe a que debemos considerar que si # Si el contenido. El contenido aumenta y su altura excede la altura de la ventana del navegador, entonces, si la altura del #contenedor sigue siendo del 100%, el #pie de página aún se ubicará en el extremo inferior de la ventana del navegador, cubriendo así el contenido del #contenido. El propósito de usar el atributo min-height es hacer que la altura del #container sea "al menos" la altura de la ventana del navegador. Cuando el contenido dentro aumenta, su altura también aumentará.

Sin embargo, cabe señalar que en Firefox e IE7, el atributo min-height es compatible, mientras que en IE6, el atributo min-height no es compatible. Sin embargo, "casualmente" es que en IE6, el atributo min-height sí lo será. debe interpretarse como el atributo de altura, pero el efecto del atributo de altura en IE6 es el efecto que min-height debería tener originalmente. Es decir, en IE6, la altura del div secundario aumentará la altura del div principal. . Entonces esto puede lograr exactamente el efecto que queremos en IE6, IE7 y Firefox.

3: A continuación, establezca #container en posicionamiento relativo (línea 9), para que sea la referencia de posicionamiento de #footer dentro de él, que es el llamado "elemento ancestro posicionado más recientemente".

4: Luego configure #foototer en posicionamiento absoluto (línea 17) y péguelo en la parte inferior del #container (línea 18).

5: Pero tenga en cuenta que si pegamos #foototer en la parte inferior del #container, en realidad se superpondrá con el div #content de arriba. Para evitar cubrir el contenido en #content, lo configuramos en #contetn Eliminando el relleno. en el lado inferior y haciendo que el valor de padding-bottom sea igual a la altura de #footer (línea 13), puede asegurarse de que se evite el texto de #content. Al calcular esta altura, preste atención al método de cálculo indicado en el. comentarios en el código (línea 14).