# 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:** 7

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [22 Fevereiro , 2021 23:20 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/7 "2021-02-22T23:20:58Z")

</div>

Sim, se o componente de rodapé oficial atender às suas necessidades, é ótimo, pois nós o mantemos atualizado para você. No entanto, algumas pessoas podem querer um layout diferente.

Já fiz algo assim no passado… é um processo semelhante ao do OP. Você define a altura de `#main-outlet` como 100% da altura da viewport (100vh) menos a altura do rodapé e do cabeçalho. Assim, em páginas curtas, seu rodapé ficará posicionado logo na parte inferior.

```scss
#main-outlet {
  box-sizing: border-box; // inclui o padding no cálculo da altura
}

```

```xml
<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  Conteúdo do meu rodapé
</script>

<script type="text/discourse-plugin" version="0.8">
    api.decoratePluginOutlet(
      "below-footer",
      (elem, args) => {
          let headerHeight = document.querySelector(".d-header").offsetHeight;
          let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
          let mainOffset = headerHeight + footerHeight;
          
          document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
      }
   );
</script>

```

 ![Screen Shot 2021-02-22 at 6.19.39 PM](https://global.discourse-cdn.com/meta/original/3X/4/7/47e1587799c186173bbf690551548ff8179e38cd.png)

Isso surge com frequência suficiente para valer a pena fazer algo assim automaticamente no núcleo, caso haja conteúdo em `footer.html` ou em qualquer um dos dois outlets de plugin de rodapé.

---

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