Como criar um rodapé fixo no final da página com html e css?
Para criar um rodapé fixo no final da página, você pode usar algumas técnicas de CSS. Aqui está um exemplo de como fazer isso:
HTML:
<body>
<div class="conteudo">
<!-- Conteúdo da página -->
</div>
<footer class="rodape">
<!-- Conteúdo do rodapé -->
</footer>
</body>CSS:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.conteudo {
flex-grow: 1;
}
.rodape {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}Nesse exemplo, definimos o elemento <body> como um contêiner flex com direção de coluna (column). Isso permite que o conteúdo ocupe todo o espaço disponível, exceto o espaço ocupado pelo rodapé. A classe .conteudo possui a propriedade flex-grow: 1, o que faz com que ele se expanda e ocupe o espaço restante disponível no <body>.
Em seguida, estilizamos o rodapé usando a classe .rodape. Definimos position: fixed; para torná-lo fixo na parte inferior da janela do navegador. As propriedades bottom: 0;, left: 0; e right: 0; garantem que o rodapé se estenda horizontalmente por toda a largura da janela.
Lembre-se de que você pode personalizar o estilo do rodapé de acordo com as necessidades do seu projeto, como definir cores, fontes, margens e outros estilos desejados.
É importante notar que, em algumas circunstâncias, pode ser necessário ajustar o layout e o posicionamento de outros elementos na página para garantir que o rodapé não se sobreponha a eles.