# Rodapé fixo na parte inferior, solução em CSS puro

**URL:** <https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509>\
**Category:** UX\
**Tags:** css\
**Created:** [20 Fevereiro , 2021 13:01 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509 "2021-02-20T13:01:08Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![cosdesign](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cosdesign/32/208585_2.png) [@cosdesign](https://meta.discourse.org/u/cosdesign)\
**Post date:** [20 Fevereiro , 2021 13:01 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/1 "2021-02-20T13:01:08Z")

</div>

Olá, entusiastas do Discourse,

Quero compartilhar com vocês minha solução de rodapé fixo, sem necessidade de JavaScript (uma alternativa [a esta solicitação](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214)), assumindo que você conhece a altura do seu rodapé. Eu dei ao meu um extra de 100px apenas para ter algum espaço entre o conteúdo e o rodapé.  
Caso você tenha um rodapé maior com várias colunas, deve definir uma altura fixa diferente na sua aba móvel.

**Passo 1:** Cole isso dentro da sua aba de CSS comum

```
body {
  position: relative;
}

#main {
  margin-bottom: 350px; /* é igual à altura do rodapé - altere conforme necessário, tanto na aba comum quanto na sua aba móvel */
}

#sticky-footer {
  padding: 50px 0;
  background: var(--header_background); /* opcional */
  color: var(--primary-medium); /* opcional */
  text-align: center; /* opcional */
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

```

**Passo 2:** Vá até sua aba `</body>` e cole o HTML do seu rodapé dentro

Exemplo:

```
<div id="sticky-footer">
  <div class="wrap">
      <!-- seu conteúdo de rodapé aqui -->
  </div>
</div>

```

É isso 🙂. Agora seu rodapé ficará fixo na parte inferior da sua página, mesmo em páginas com conteúdo curto.

É assim que nosso rodapé se parece em uma página com conteúdo curto:

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/4/a4c95e56509ca675521d72fd18312fd97fd0d774.png)

Caso contrário, ele seria colocado no meio da tela, como assim:

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/2/5201e324a31bc356831ad4383689a812cf6a7c79.png)

---

_[View the full topic](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509)._