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>
HTML
também.tags
principais que compõem esse flex, para que possamos ver se ofooter
está abaixo ou acima de quem.