"Rodapé" é geralmente o bloco mais inferior de um layout de página da web. A dificuldade mais comum em posicionar este rodapé é fazer com que ele seja sempre posicionado na parte inferior da janela, independentemente do tamanho da página ou do tipo de navegador. Houve algumas soluções para o problema desde a época da transição massiva para o layout de blocos, e uma delas é fornecida abaixo.
É necessário
Conhecimento básico de CSS e HTML
Instruções
Passo 1
Vamos usar o esquema de layout de página mais comum como base - três blocos colocados um acima do outro. A parte superior (cabeçalho) deve sempre estar alinhada à borda superior da janela, a parte inferior (rodapé) - à borda inferior, e o principal (corpo) deve sempre preencher todo o espaço entre eles. O código-fonte deve conter um link para a especificação XHTML 1.0 Transitional, e a descrição dos estilos deve ser colocada em um arquivo CSS externo (para evitar problemas com o Opera 9. XX). A descrição HTML da estrutura deve ser colocada no principal corpo da página. Ele começará, é claro, do bloco superior, na tag em que um atributo identificador com um valor deve ser colocado, por exemplo, divHead:
Bloco de cabeçalho.
O bloco principal deve consistir em um par de blocos aninhados. O externo receberá o identificador divOut e o interno - divContent:
Conteúdo principal.
O rodapé está definido como divFoot:
Rodapé da página.
Passo 2
O código HTML completo da página deve ser assim:
Tres blocos
@import "style.css";
Este é um bloco de cabeçalho.
Conteúdo principal.
Este é o rodapé da página.
etapa 3
A descrição do estilo implementa o seguinte mecanismo de layout: o bloco do meio (divOut) é definido como 100% da altura, o bloco superior (divHead) terá posicionamento absoluto e o inferior - relativo. No bloco de conteúdo principal (divContent), deve haver um espaço livre na parte superior igual à altura do bloco de título para que não se sobreponha ao conteúdo principal da página. E o bloco inferior (rodapé) deve ter uma margem negativa na parte superior, igual a altura deste bloco. Isso o elevará acima da borda inferior da janela do navegador. Este mecanismo pode ser implementado usando um arquivo css com o seguinte conteúdo: * {margin: 0; preenchimento: 0}
html, corpo {altura: 100%;} corpo {
posição: relativa;
cor: # 000;
}
#divOut {
margem: 0;
altura mínima: 100%;
fundo: #FFF;
cor: # 000;
}
* html #divOut {height: 100%;}
#divHead {
posição: absoluta;
esquerda: 0;
topo: 0;
largura: 100%;
altura: 80px;
plano de fundo: # 2F5000;
estouro: oculto;
alinhamento de texto: centro;
cor: #FFF;
} #divFoot {
posição: relativa;
limpar ambos;
margem superior: -60px;
altura: 60px;
largura: 100%;
cor de fundo: # 2F5000;
alinhamento de texto: centro;
cor: #FFF;
}
.divContent {
largura: 100%;
flutuar: esquerda;
acolchoamento superior: 81px;
} O nome que você especificou para a folha de estilo no código HTML é style.css.
