A empresa para a qual trabalho ( Inventis ) escreveu em holandês sobre a criação de um rodapé para o seu site ( link ). Isso foi há quase 4 anos. Mesmo a bússola docs ainda usa a mesma técnica que nós. Não estou dizendo que fomos os primeiros a usar essa técnica.
Já estamos usando box-sizing: border-box;há algum tempo. Paul Irish escreveu * {Box-sizing: Border-box} FTW em 2012. Mas podemos usá-lo para atualizar o código de rodapé fixo antigo?
Isenção de responsabilidade: não estou afirmando que sou o primeiro a tentar essa solução, nem mesmo testei isso. Então se você (ou se conhece alguém que) fez algo assim antes, deixe um comentário e eu adicionarei o link para este post.
O que temos feito nos últimos anos
Seu HTML seria mais ou menos assim:
<body>
<div id="root">
<div id="root_footer"></div>
</div>
<div id="footer">
Footer content goes here.
</div>
</body>E seu CSS provavelmente é algo assim:
body, html {
height: 100%;
}
div#root {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
div#root_footer, div#footer {
height: 60px;
}Um novo visual para o rodapé adesivo
Ao usar, box-sizing: border-box;podemos finalmente remover esse vazio div#root_footer. Isso não funcionará no IE7 (ou mais antigo) porque não oferece suporte, box-sizingmas não quebraria o layout, então acho que podemos chamar isso de aprimoramento progressivo com segurança.
HTML:
<body>
<div id="root">
</div>
<div id="footer">
Footer content goes here.
</div>
</body>CSS:
body, html {
height: 100%;
}
div#root {
box-sizing: border-box;
min-height: 100%;
padding-bottom: 60px;
}
div#footer {
margin-top: -60px;
}