Como fazer com que a parte do rodapé da página ("rodapé") cole na borda inferior da janela - este é provavelmente o problema mais comum no layout das páginas do site. Existem, é claro, soluções e várias delas. Abaixo está uma maneira de garantir que o rodapé esteja sempre pressionado para a parte inferior da página, independentemente da quantidade de conteúdo e do tipo de navegador.
É necessário
Conhecimento básico de CSS e HTML
Instruções
Passo 1
Vamos pegar um dos esquemas de paginação mais típicos como exemplo - ele terá um sótão (cabeçalho), bloco principal e rodapé. Claro, se necessário, você pode colocar várias colunas no bloco principal, mas não faremos isso aqui, nos concentraremos apenas em não posicionar o rodapé. O código HTML da página começará com a declaração da especificação:
Entre as tags e, além do título da página, colocaremos uma indicação da codificação: Bem como um link para um arquivo CSS externo contendo uma descrição de estilos: @import "styles.css"; Não colocaremos o descrição de estilos diretamente no código html da página para evitar complicações com o navegador Opera da versão nona. Entre as tags e coloque a estrutura de blocos da página. O primeiro, é claro, é o bloco de título. Forneceremos a ele o identificador de cabeçalho para poder definir estilos para este bloco específico:
Este cabeçalho está sempre no topo da janela.
Então - o bloco principal da página. Ele consistirá em dois aninhados - externo (identificador - externo) e interno (identificador - envoltório externo):
Esta é a parte principal.
E, finalmente, o rodapé:
É rodapé - sempre na parte inferior da janela!
A página completa terá a seguinte aparência:
Como pressionar o rodapé
@import "styles.css";
Este cabeçalho está sempre no topo da janela.
Esta é a parte principal.
É rodapé - sempre na parte inferior da janela!
Passo 2
Agora vamos passar para o conteúdo da folha de estilo. Ele implementa o seguinte esquema: o bloco da página principal será definido com 100% de altura, o título será posicionado de forma absoluta e o rodapé será relativamente. Para evitar que o título se sobreponha ao conteúdo principal da página, esse conteúdo principal é colocado em uma caixa adicional dentro da caixa principal, e essa caixa adicional é definida para uma margem superior igual à altura da caixa do título. E o rodapé recebe uma margem superior negativa igual à sua altura - desta forma, ele será elevado acima da borda inferior da janela em toda a sua altura. Conteúdo completo do arquivo css: * {margin: 0; preenchimento: 0}
html, corpo {altura: 100%;} corpo {
cor preta;
posição: relativa;
}
#outer {
altura mínima: 100%;
margem: 0;
fundo: branco;
cor preta;
} * html #outer {height: 100%;}
#header {
posição: absoluta;
topo: 0;
esquerda: 0;
largura: 100%;
altura: 70px;
plano de fundo: # 304a00;
estouro: oculto;
cor branca;
alinhamento de texto: centro;
} #footer {
posição: relativa;
margin-top: -50px;
limpar ambos;
largura: 100%;
altura: 50px;
cor de fundo: # 304a00;
cor branca;
alinhamento de texto: centro;
}
.outerwrap {
flutuar: esquerda;
largura: 100%;
acolchoamento superior: 71px;
} Este arquivo deve ser salvo com o nome que especificamos no código html da página - styles.css.
