🥇 Melhor rodapé adesivo

Sempre tive dificuldade em colocar o rodapé na parte inferior da página, onde deveria estar. E depois de tentar de várias maneiras, (com javascript, com flexbox etc.) descobri que o seguinte funciona melhor para mim:

html:

<html>
    <head>...</head>
    <body>
        <header class="page-header">...</header>
        <main>
           [put block-level elements here]
        </main>
        <footer class="page-footer">...</footer>
    </body>
</html>

css:

html {
    height: 100%;
}

body {
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed; /*1*/
}

main {
    display: table-row;
    height: 100%;
}

O que isso fará é empurrar o cabeçalho e o rodapé para a parte superior e inferior da página. Você precisará colocar elementos de nível de bloco no principal para seu layout, para usar margens e preenchimentos, uma vez display: table-rowque não aceita margens e preenchimentos.

correção para problemas de largura máxima com imagens: consulte http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/

Related Posts