Entrar Ainda não tem acesso?
1
resposta

Rodapé fixo no final da TELA

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox

por Estudante
| 33.5k xp | 4 posts

Olá, pessoal

Estou com um laboratório, e gostaria da ajuda da ALURA, por favor:

Quero que o RODAPÉ fique no final da tela ou no final da página quando esse último for maior que a tela, então tenho 2 situações:

1) O conteúdo da página não ocupa toda a tela, então, mesmo assim o rodapé deve ficar "grudado" no final da tela. cenário 1

2) O conteúdo da pagina ocupa mais do que o espaço da tela, sendo assim o rodapé deve começar a "descer" junto com o conteúdo, ficando no final da página.

cenário

O Problema: Quando eu fixo o rodapé no final da tela e caso o conteúdo cresça, o rodapé fica estático no "meio do conteúdo".

HTML

Cabeçalho

<main>
    <div>
        <div class="quadrado"></div>
        <div class="quadrado"></div>
        <div class="quadrado"></div>
        <div class="quadrado"></div>
        <!-- <div class="quadrado"></div>
        <div class="quadrado"></div>
        <div class="quadrado"></div>
        <div class="quadrado"></div>
        <div class="quadrado"></div> -->
    </div>
</main>

<footer>
    <div class="rodape">
        <p>rodape</p>
    </div>
</footer>

CSS *{ margin: 0px; padding: 0px; }

.cabecalho{ background-color: blue; }

body{ height: 100vh; }

.quadrado{ width: 100px; height: 100px; background-color: blueviolet; margin: 5px; }

.rodape{ background-color: green; position: relative; bottom:0%; width: 100%; }

1 resposta
por Maria Eduarda Gonçalves Furlan
| 1942.4k xp | 6655 posts
Instrutor Monitora de Fórum | Alura

Olá Dev, como você está?

Peço desculpas pela demora em obter um retorno.

Para conseguir o comportamento desejado no rodapé, você pode utilizar CSS Flexbox. O Flexbox permitirá que o rodapé fique "grudado" no final da tela quando o conteúdo não ocupar toda a página e descerá junto com o conteúdo caso ele seja maior que a tela.

Aqui está uma solução utilizando Flexbox:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.cabecalho {
  background-color: blue;
  padding: 10px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.conteudo {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.quadrado {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  margin: 5px;
}

footer {
  background-color: green;
  padding: 10px;
  • No CSS, definimos o body como um contêiner flex com flex-direction: column, para garantir que o cabeçalho e o rodapé fiquem na parte superior e inferior, respectivamente, e o conteúdo preencha o espaço restante no meio.
  • O main também é um contêiner flex com flex-direction: column, e tem flex: 1, o que faz com que ele ocupe todo o espaço disponível no contêiner flex do body
  • O conteúdo dentro de .conteudo é um contêiner flex com flex-wrap: wrap, permitindo que os quadrados sejam organizados em várias linhas.

Com essa abordagem, o rodapé permanecerá no final da tela quando o conteúdo não ocupar toda a página e descerá com o conteúdo caso ele seja maior que a tela. A altura mínima de 100vh no body também garante que o rodapé fique sempre na parte inferior da página, mesmo que o conteúdo seja pequeno.

Espero ter conseguido ajudar, qualquer dúvida estou à disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!