3
respostas

Cabeçalho no final da página

Bom dia. Estou refazendo o projeto do curso com sugerido no final pelo professor para treinar. Dessa vez criei o cabeçalho e logo em seguida o footer. Reparei que o footer não fica no final da página se não tiver conteúdo no meio e isso me deu dúvida porque se o meu conteúdo do meio for pequeno demais, meu cabeçalho vai ficar pra cima voando. Como faz para ele ficar fico no final da página tendo conteúdo na main ou não?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Tentei usar um bottom: 0 mas não funciona

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Bom dia. Achei uma solução na internet assim, porém queria que alguém me explicasse melhor:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Vi no site: https://pt.stackoverflow.com/questions/217714/como-deixar-o-footer-sempre-no-final-da-pagina para colocar position: fixed e bottom: 0 . Dessa forma o bottom funcionou e não sei porque só funcionou com esse fixed. Mas mesmo o footer descendo, ele ficou estranho sem preencher 100% da página, então tive que botar esse width de 100% senão ia ficar assim:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Alguém me ajuda a entender como funciona esse fixed, porque o bottom só funcionou com ele e porque tive que botar o width: 100% para ocupar tudo?

Opa eu novamente... O fixed nada mais faz do sair do contexto do browser e fica inteiramente na sua tela, como se ele estivesse acima de tudo... Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Como você pode ver eu estou no footer do ste site da minha empresa... Mas, como do header está fixed, mesmo descendo a pagina ele não vai da posição definida no codigo...

Como eu vi seu codigo anteriormente acredito que você esteja escrevendo ela de uma maneira "Errada" como você não sabe especificamente o tamanho da sua pagina o ideal seria deixar o footer acompanhando o main principal e não já efetuar a posição do footer antes de escrever todo o codigo.

Width é a largura da pagina... se a sua pagina tem uma largura de 1440px e você colocar 100% ele vai preencher os 1440px... E assm por diante se for uma tela tiver 1080px, 720px, 320px... O 100% é para definir a largura total referente ao monitor de quem está mexendo em seu site.

Boa tarde. Tirei a position fixed do footer e coloquei a margin-bottom: 0, e aí ele sempre fica lá em baixo. Só não sei se está certo assim.