Como criar um rodapé responsivo usando CSS

mantendo o rodapé na parte inferior da página é um requisito de design da web comum. No entanto, alguns usuários encontram dificuldades no uso da propriedade de posicionamento "absoluta". Este artigo o guiará através da implementação CSS correta para obter um efeito de rodapé pegajoso sem interromper seu layout. Esquerda: 0; Inferior: 0; Altura: 100px; largura: 100%;

Solução proposta

para resolver o problema sem usar plugins ou elementos html adicionais, siga estas etapas:

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

Posição: relativa; Min-altura: 100%; } corpo { margem: 0 0 100px; / * inferior = altura do rodapé */ } #Footer inferior { Posição: fixado; Esquerda: 0; Inferior: 0; Altura: 100px; largura: 100%; }

1. Verifique se a altura especificada em "Body {margin}" corresponde à altura real do elemento de rodapé (por exemplo, 100px).

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}