Itens de rodapé fixos no rodapé


(Gabriel Marinho) #1

Como fixo uma div no rodapé do site, mesmo se ele alterar de tamanho e etc?

Minha codificação atual do problema:

footer {
    text-align: center;
    position: fixed;
}

#copyright-text {
    font-size: 13px;
    line-height: 18px;
    color: rgb(102, 102, 102);
    font-family: 'Open Sans', sans-serif;
}

(Randys Machado) #2

Tua pergunta não ficou bem clara pra mim, mas se tu quer fixar uma div no radapé, tu deve utilizar o position:fixed na div em questão. Neste teu exemplo acima todo teu footer esta fixo.


(Gabriel Marinho) #3

Reli meu tópico e nem eu entendi o que havia dito. Desculpe-me por isso.

Meu objetivo é desenvolver um rodapé que fique fixo no final da página. Ou seja, que realmente fique no rodapé.

Salvei a imagem da pré-visualização da minha index no Imgur neste link: https://imgur.com/MkEmSNa

No quadrado azul você vê onde o rodapé está posicionado.

No quadrado vermelho é onde eu gostaria que o rodapé estivesse posicionado. Independente do tamanho do monitor ou dispositivo, eu quero que ele fique no final da página.


(Luan Maik) #4

Vai ter que fixar a altura do <body> para height: 100% ou height: 100vh
Da uma estudada no flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Dica: o footer deve conter o estilo align-self: flex-end;