1

Meu rodapé tem um uma altura definida(height: 40px;). Quando o conteúdo da página em si é pequeno, a área restante depois dele fica toda em branco, por causa do background, dando uma estética ruim para o site.

Queria que depois do rodapé, ele preenche-se todo o resto da página e não fica-se branco.

Entretando quando coloco height: 100% em <footer>ele ultrapassa o final da página criando um scroll indesejado. Ou seja, aumenta o tamanho total da página em si.

A única solução que vejo é colocar background-color: mesmacordofooter; no body. Porém estou achando que isso é uma prática ruim de programação.

footer { width: 100%; background: rgb(45,45,47); color: #B8BBC1; display: flex; justify-content: center; font-size: 20px; }

#footercontainer { width: 1000px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 40px; }

<footer> <div id="footercontainer"> </div> </footer>

3
  • Coloque o HTML também.
    – Edilson
    Commented 24/03/2017 às 19:14
  • @Edilson a parte principal do HTML em relação a dúvida já está no post. Não posso enviar o HTML todo por que é muito código e fica inviável colocar aqui. Acho que o que eu já postei é o suficiente para entender o problema. Caso necessite de algo, só pedir.
    – Amzero
    Commented 25/03/2017 às 23:55
  • Digo, que coles apenas um esboço, por exemplo as tags principais que compõem esse flex, para que possamos ver se o footer está abaixo ou acima de quem.
    – Edilson
    Commented 26/03/2017 às 7:21

2 Respostas 2

1

Se entendi bem a sua pergunta, é exatamente o que eu acabei de fazer no meu código. :)

Então vamos lá:

O seu html deve ficar algo desse tipo:

<div class="wrapper">
    <header></header>
    <main>conteúdo do seu site</main>
    <footer></footer>
</div>

E o seu css assim:

.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.wrapper main {
flex: 1;
}

Dessa forma, sempre que o conteúdo do seu site for pequeno, seu footer vai ficar na parte inferior do navegador. E sempre que o conteúdo for maior do que a tela, o footer vai acompanhar o conteúdo e aparecer no final do scroll.

0

Tente este código:

footer {
 width: 100%;
 position: fixed;
 bottom: 0;
 right: 0;
 background: rgb(45,45,47);
 height: 40px;
 display: flex;
}

#footercontainer {
    width: 1000px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

<footer>
  <div id="footercontainer"> 
  </div>
</footer>
6
  • Não deu muito certo. Estou trabalhando com Flex. Preciso dos Flexs e de #footercontainer. Quando o conteúdo do site é grande e tem scroll, o rodapé fica por cima dele e no meio da página.
    – Amzero
    Commented 24/03/2017 às 18:49
  • Alterei a resposta recolocando as referencias. Se o Flex é necessário, considere colocar como tag na pergunta.
    – Rene Freak
    Commented 24/03/2017 às 18:55
  • Continua a mesma coisa. Parece que sempre que usa position: absolute e bottom: 0, ele fica em cima do conteúdo no meio da página, quando o conteúdo é grande. Não sabia do lance das Tags, vou usar a partir de agora.
    – Amzero
    Commented 24/03/2017 às 19:05
  • Quando alterei o codigo, não tinha lido esta parte do alinhamento, só a do flex. Agora corrigi e sim, trata-se dos atributos position:fixed;, bottom: 0; e right: 0;
    – Rene Freak
    Commented 24/03/2017 às 19:13
  • 1
    Reparei nisso, também. Você já tem duas opções: esta que propus e a que mencionou na pergunta (colocar a cor no background). Sem conhecer os códigos, acho que outra solução genérica, vai depender de um código mais complexo (javascript) que detecte a posição do footer e o expanda.
    – Rene Freak
    Commented 26/03/2017 às 18:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .