🥇 Como colocar o rodapé na parte inferior da janela

Sem introdução, layout html:

<body>
    <div class="wrapper">
        <div class="wrapper-main">
            <div class="wrapper-header">
                <a href="/">Home</a>
            </div>
            <div class="wrapper-content">
                your page content
            </div>
        </div>
        <div class="wrapper-footer">
            <span>my footer is at the bottom</span>
        </div>
    </div>
</body>

Sobre o css:

html, body { height:100%; }
.wrapper {
    min-height:100%;
    height:auto !important;
    position:relative;
}
.wrapper-main {
    width:1024px;
    margin:0 auto;
    padding-bottom:30px; /* Height of the footer */
}
.wrapper-footer {
    height:30px;
    position:absolute;
    bottom:0;
}

Existem várias maneiras de colocar o rodapé no final, mas optei por apresentar esta aqui, que é bastante fácil de usar.

O mais importante de entender é esta solução requer que você saiba a altura do seu rodapé. Caso contrário, você deve usar outra técnica.

Compatível em todos os navegadores.

Related Posts