Por que meu rodapé está no meio da minha página da Web?

Um rodapé de site pode aparecer no meio da página da Web e não na parte inferior por vários motivos. Um dos mais comuns é que o conteúdo do site é pequeno e o rodapé é empurrado para o meio. Os contêineres com o rodapé podem estar codificados incorretamente, as margens ou o preenchimento podem estar incorretos e a propriedade "flutuante" pode estar errada.

Posição do Rodapé

A propriedade CSS "position" do rodapé determina onde o rodapé é posicionado na página da Web em relação aos outros elementos da página, como o cabeçalho e o conteúdo principal do corpo. Os cinco tipos de posicionamento são posição estática, posição fixa, posição relativa, posição sobreposta e posição absoluta. O posicionamento absoluto no rodapé é usado para que o elemento de rodapé não se comporte em relação aos outros elementos. Adicione a "posição: absoluta"; codificação dentro das tags "{" e "}" do colchete "#footer". Além disso, adicione "bottom: 0;" na linha diretamente abaixo da codificação "posição". Agora o rodapé está posicionado absolutamente na parte inferior do contêiner "DIV" da página da Web.

Largura e Altura do Rodapé

As propriedades de largura e altura do rodapé podem estar interferindo no posicionamento do rodapé. Se o rodapé for muito grande, ocupará muito espaço na parte inferior da página da Web. Nas tags de colchetes "#footer" de "{" e "}", estão listados os "width: Xpx;" e "height: Xpx;" codificação. Altere a largura para "100%" para tornar o rodapé tão amplo quanto o restante do conteúdo do site. Altere a altura para o tamanho de pixel desejado, como "60px" ou "75px". Essas duas alterações podem contribuir para que o rodapé seja empurrado para baixo até a parte inferior da página da Web.

Margens e preenchimento

A codificação de margem e preenchimento pode interferir na posição do rodapé. Quando as margens do rodapé são muito estreitas ou o preenchimento é muito grande, a posição do rodapé muda e pode se mover para o meio da página da Web. Uma solução fácil é remover as margens e o preenchimento por inteiro, para que essas propriedades de rodapé correspondam ao resto da codificação. Localize a propriedade "#footer" na codificação da página da Web. Nas tags de colchetes "{" e "}" estão a "margem: Xpx Xpx Xpx Xpx;" e "preenchimento: Xpx Xpx Xpx Xpx;" codificação. Agora, as margens e o preenchimento do rodapé são determinados pelas tags "#body" e "#container" na parte superior da página da Web. Remova ambas as linhas de codificação e atualize a página da Web.

O layout do contêiner

Um rodapé de website é um elemento que é posicionado no layout geral do contêiner DIV. Quando as propriedades do layout do contêiner estão incorretas, isso pode afetar a posição do rodapé na página da Web. Dentro das tags do "#container" de "{" e "}" estão as mesmas propriedades "height" e "position". Altere a "altura" para 100% e mude a "posição" para relativo. Adicione uma nova linha de codificação ao "#container" e digite "min-height: 100%;", o que dá ao layout inteiro do container uma nova altura mínima. Agora, toda a página da Web permanecerá na altura total da tela, independentemente da quantidade de conteúdo. A posição relativa também interage positivamente com a posição absoluta do rodapé.