Skip to main content
Commonmark migration
Fonte Link

Para browsers recentes você pode adicionar isto ao seu CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 60px; /* altura do seu footer */
}

Segundo o criador da solução, functiona com: IE8+, Chrome / Safari, Firefox e Opera.

A maior vantagem desta solução sobre as outras é que você não precisa criar wrappers em volta do seu conteúdo. Ela utiliza o próprio body como wrapper.

Exemplo: Com muito conteúdo - Sem muito conteúdo

###Exemplo: Com muito conteúdo - Sem muito conteúdo (O mesmo código foi utilizado para os dois exemplos, só o conteúdo que muda.)

Para browsers recentes você pode adicionar isto ao seu CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 60px; /* altura do seu footer */
}

Segundo o criador da solução, functiona com: IE8+, Chrome / Safari, Firefox e Opera.

A maior vantagem desta solução sobre as outras é que você não precisa criar wrappers em volta do seu conteúdo. Ela utiliza o próprio body como wrapper.

###Exemplo: Com muito conteúdo - Sem muito conteúdo (O mesmo código foi utilizado para os dois exemplos, só o conteúdo que muda.)

Para browsers recentes você pode adicionar isto ao seu CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 60px; /* altura do seu footer */
}

Segundo o criador da solução, functiona com: IE8+, Chrome / Safari, Firefox e Opera.

A maior vantagem desta solução sobre as outras é que você não precisa criar wrappers em volta do seu conteúdo. Ela utiliza o próprio body como wrapper.

Exemplo: Com muito conteúdo - Sem muito conteúdo

(O mesmo código foi utilizado para os dois exemplos, só o conteúdo que muda.)

Fonte Link
Kazzkiq
  • 12mil
  • 10
  • 53
  • 83

Para browsers recentes você pode adicionar isto ao seu CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 60px; /* altura do seu footer */
}

Segundo o criador da solução, functiona com: IE8+, Chrome / Safari, Firefox e Opera.

A maior vantagem desta solução sobre as outras é que você não precisa criar wrappers em volta do seu conteúdo. Ela utiliza o próprio body como wrapper.

###Exemplo: Com muito conteúdo - Sem muito conteúdo (O mesmo código foi utilizado para os dois exemplos, só o conteúdo que muda.)