A ideia básica é

primeiro considerar a configuração de um div contêiner na camada externa, com o id definido como #container, de modo que sua altura seja a altura da janela do navegador e, em seguida, definir o div #footer como um div filho de # container e use o posicionamento absoluto para fixá-lo na extremidade inferior do #container para obter o efeito desejado.

Clique aqui para ver o efeito da página do caso. Altere a altura e a largura do navegador para ver o efeito da parte Rodapé.

Implementação de código

: primeiro considere a estrutura HTML. O código HTML desta página de demonstração é muito simples.

body,html {
margem: 0;
preenchimento: 0;
fonte: 12px/1,5 arial;
altura:100%;
}
#contêiner {
altura mínima: 100%;
posição: relativa;
}
#contente {
preenchimento: 10px;
preenchimento inferior: 60px;
/* 20px(tamanho da fonte)x2(altura da linha) + 10px(preenchimento)x2=60px*/
}
#rodapé {
posição: absoluta;
inferior: 0;
preenchimento: 10px 0;
cor de fundo: #AAA;
largura: 100%;
}
#rodapé h1 {
fonte: 20px/2 Arial;
margem:0;
preenchimento:0 10px;
}
1: Primeiro, defina a altura (atributo de altura) dos elementos html e body para 100% (linha 5). Isso primeiro garantirá que a altura do elemento raiz preencha toda a janela do navegador e, em seguida, a altura de #container pode. preencha toda a janela do navegador. Quanto ao motivo pelo qual os elementos html e body são definidos ao mesmo tempo, é porque o Firefox e o IE consideram o elemento raiz diferente, então eles são definidos aqui.

2: Em seguida, defina a altura de #container para 100% (linha 8), mas observe que o atributo "min-height" é usado aqui em vez do atributo de altura comum. Isso ocorre porque temos que considerar que if # If o conteúdo. no conteúdo aumenta e sua altura excede a altura da janela do navegador, então, se a altura de #container ainda for 100%, #footer ainda será posicionado na extremidade inferior da janela do navegador, cobrindo assim o conteúdo de #content. O objetivo de usar o atributo min-height é fazer com que a altura do #container seja "pelo menos" a altura da janela do navegador. Quando o conteúdo dentro dele aumentar, sua altura também aumentará.

No entanto, deve-se notar que no Firefox e no IE7, o atributo min-height é suportado, enquanto no IE6, o atributo min-height não é suportado. No entanto, o "coincidentemente" é que no IE6, o atributo min-height será. ser interpretado como o atributo height , mas o efeito do atributo height no IE6 é o efeito que min-height deveria ter originalmente. Ou seja, no IE6, a altura do div filho aumentará a altura do div pai. . Portanto, isso pode atingir exatamente o efeito que desejamos no IE6, IE7 e Firefox.

3: Em seguida, defina #container para posicionamento relativo (linha 9), para torná-lo a referência de posicionamento de #footer dentro dele, que é o chamado "elemento ancestral posicionado mais recentemente".

4: Em seguida, defina #footer para posicionamento absoluto (linha 17) e cole-o na parte inferior do #container (linha 18).

5: Mas observe que se colarmos #footer na parte inferior de #container, ele realmente se sobreporá ao div #content acima. Para evitar cobrir o conteúdo em #content, nós o configuramos em #contetn Removendo o preenchimento. na parte inferior e igualando o valor de padding-bottom à altura de #footer (linha 13), você pode garantir que o texto de #content seja evitado. Ao calcular esta altura, preste atenção ao método de cálculo fornecido no. comentários no código (linha 14).