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

Contribuir Experiência do Usuário
1

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), 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 :slightly_smiling_face:. 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
image1150×1082 28.9 KB

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

image
image1316×1222 33.5 KB

3 curtidas
2

Por que usar isso em vez do componente de tema padrão do rodapé do Discourse?

1 curtida
3

Você me diz, Jeff :slight_smile: ..precisamos instalar componentes para cada código HTML e CSS extra?
Isso não é um tutorial de “como criar um rodapé”, mas sim uma solução alternativa rápida para fazer um rodapé ficar fixo no final da página para aqueles que podem querer criar o próprio rodapé.

4

Hmm, minha ideia é que queremos que as pessoas utilizem os componentes do tema sempre que possível, pois são “oficiais” da nossa parte e, portanto, recebem suporte completo, atualizações automáticas, etc. O que acham @awesomerobot, @Johani e @jordan.vidrine?

2 curtidas
7

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.

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

<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
Screen Shot 2021-02-22 at 6.19.39 PM878×787 118 KB

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é.

4 curtidas
8

@cosdesign , onde fica essa aba CSS se não se importa de perguntar, cara :slight_smile:

9

Para o seu tema Padrão, você o encontraria navegando pelo botão Editar CSS/HTML:

Untitled
Untitled1482×751 43.1 KB

Embora fosse melhor criá-lo como um componente de tema. (clique no botão instalar e ‘criar novo’ a partir daí)

Há mais informações em Developing Discourse Themes & Theme Components :+1:

2 curtidas
10

incrível :slight_smile:

1 curtida