CSS para fazer com que o rodapé da página HTML fique na parte inferior da página com uma altura mínima, mas não se sobreponha à página

379

Eu tinha a seguinte página (deadlink:) http://www.workingstorage.com/Sample.htmque tem um rodapé que não consigo sentar na parte inferior da página.

Eu quero que o rodapé

  • grude na parte inferior da janela quando a página for curta e a tela não estiver cheia e
  • fique no final do documento e desça normalmente quando houver mais de uma tela cheia de conteúdo (em vez de sobrepor o conteúdo).

O CSS é herdado e me confunde; Não consigo alterá-lo corretamente para colocar uma altura mínima no conteúdo ou fazer o rodapé ir para o fundo.

css footer Caveatrob
fonte
16
É incrível que esse seja um problema tão comum. Talvez no CSS4 veremos implementações de "make a nav bar" e "make a footer", pois essas tentativas são frequentes.
Isomorphismes
11
Nunca haverá CSS4 (o CSS3 apenas crescerá). Eu estou pensando que isso será corrigido com a implementação de flexbox.
Marijke Luttekes
11
Artigo excelente sobre isso: css-tricks.com/couple-takes-sticky-footer
Phil
expertsuggestion.com/css-snippets/8
Lalit Baghel

Respostas:

345

Um método simples é fazer com que o corpo 100%da sua página, com um min-heightdos 100%demais. Isso funciona bem se a altura do rodapé não mudar.

Dê ao rodapé um margem superior negativa:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
Jon Winstanley
fonte
27
Isso só funciona se você souber a altura do rodapé com antecedência. Às vezes, os rodapés têm conteúdo dinâmico ou você cria uma estrutura. Alguma idéia para rodapés de altura variável?
Costa
@ Costa verifique minha resposta aqui , para uma solução que funcione com rodapés de altura variável.
Jose Rui Santos
para conteúdo dinâmico, omita a "altura" e o rodapé se adaptará ao conteúdo. Não testado em todos os navegadores
m47730
Isso pode exigir box-sizing: border-box;para o corpo [e o #container].
Kontsolebox #
Parece um monte de truques estranhos, há respostas abaixo que são simples e não usam truques.
Andrew Koster
166

Eu desenvolvi um método bastante fácil de colocar o rodapé na parte inferior, mas como os métodos mais comuns, você precisará ajustá-lo para se ajustar à altura do rodapé.

VER DEMO

Método Flexbox:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Expandir snippet

Este método abaixo usa um "truque" colocando um ::afterpseudo-elemento no bodye define-o para ter a altura exata do rodapé, para que ele ocupe exatamente o mesmo espaço que o rodapé, portanto, quando o rodapé estiverabsolute posicionado sobre ele, parece que o rodapé está realmente ocupando espaço e eliminando os efeitos negativos de seu posicionamento absoluto (por exemplo, analisando o conteúdo do corpo)

position:absolute método: (não permite altura dinâmica do rodapé)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Expandir snippet

Método de layout da tabela:

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Expandir snippet

vsync
fonte
Simples e elegante e, mais importante, funciona. Outras soluções falham quando você começa a adicionar divs com display: table display: table-row display:table-cell. No entanto, eu achei que precisava adicionar body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}para evitar uma barra de rolagem. Você pode atender a isso ajustando o, body:after heightmas estou especificando o meu em rem not px, para que se torne problemático.
Steve Waring
3
@SteveWaring - Obrigado. Atualizou esta resposta, pois era bastante antiga. Agora sou a favor do usoflexbox
vsync
11
O CSS em "marcação comum básica" teve um pequeno erro que fez com que não funcionasse (o erro não estava presente no "DEMO" vinculado, o que está correto). Tomei a liberdade de consertá-lo.
sleske
3
OBRIGADO! A solução flexbox é realmente simples e não usa hacks, tamanhos ou posições fixas estranhas.
Andrew Koster
11
Esta demonstração é a única que funciona! Fantástico, obrigado!
21319 Drakinite
51

Uma abordagem muito simples que funciona muito bem entre navegadores é a seguinte:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
Expandir snippet

Tamás Pap
fonte
34

Eu usei isso para colocar meu rodapé no fundo e funcionou para mim:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Essa é a única modificação que você precisa fazer no HTML; adicione- diva à "allButFooter"classe. Fiz isso com todas as páginas, tão curtas que sabia que o rodapé não grudaria no fundo e também páginas longas o suficiente para que eu já sabia que tinha que rolar. Eu fiz isso, para que eu pudesse ver se funciona corretamente no caso de o conteúdo de uma página ser dinâmico.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

A "allButFooter"classe tem um min-heightvalor que depende da altura da viewport ( 100vhsignifica 100% da altura da viewport) e da altura do rodapé, que eu já sabia que era40px .

Foi tudo o que fiz e funcionou perfeitamente para mim. Eu não tentei em todos os navegadores, apenas no Firefox, Chrome e Edge, e os resultados foram os que eu queria. O rodapé fica na parte inferior e você não precisa mexer no índice z, na posição ou em outras propriedades. A posição de cada elemento no meu documento era a posição padrão, não a mudei para absoluta ou fixa, nem nada.

Trabalhando com design responsivo

Aqui está algo que eu gostaria de esclarecer. Esta solução, com o mesmo rodapé com 40px de altura, não funcionou como eu esperava quando estava trabalhando em um design responsivo Twitter-Bootstrap. Eu tive que modificar o valor que eu estava subtraindo na função:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

Provavelmente porque Twitter-Bootstrapvem com margens e preenchimentos próprios, por isso tive que ajustar esse valor.

Espero que isso seja útil para vocês! Pelo menos, é uma solução simples de tentar e não envolve grandes alterações em todo o documento.

N. Larrieux
fonte
Eu encontrei problemas com todos os tipos de soluções para esse problema. Esta solução funciona com minha página que varia o que é exibido no corpo usando display: noneObrigado. É bom e simples também.
Steve Waring
depois de muitas horas tentando soluções, apenas duas funcionavam nl. position: fixed; bottom: 0e este. Essa solução é a melhor porque o rodapé não fica na parte inferior, mas permanece no final da página rolável.
Hmerman6006
para desenvolver sua resposta, você pode vê-la de outra maneira, definindo o .footer {max-height: calc(100vh+40px); position: absolute}. Como também funciona, você deve saber apenas o tamanho do seu corpo.
Hmerman6006
29

A partir do IE7, você pode simplesmente usar

#footer {
    position:fixed;
    bottom:0;
}

Veja caniuse para suporte.

Liam
fonte
77
Não quero o rodapé na parte inferior quando houver conteúdo além do rodapé. Quero que o rodapé fique na parte inferior quando não houver o suficiente e, em seguida, expanda para baixo normalmente quando houver mais de uma tela. O rodapé pegajoso resolveu isso.
Caveatrob
@Caveatrob: Tomei a liberdade de editar essas informações importantes em sua pergunta, apenas para evitar mal-entendidos (para futuros leitores, você provavelmente já resolveu isso enquanto isso :-)).
sleske
Essa solução é a única que imprime o rodapé em todas as páginas e é muito simples! Mas não consigo fazê-lo funcionar que o conteúdo não se sobrepõe ao conteúdo principal. Alguém tem uma solução para isso?
Hatzen
15

Uma solução simples que eu uso, funciona a partir do IE8 +

Forneça min-height: 100% em html, para que, se o conteúdo for menor, a página parada ocupe a altura total da porta de visualização e o rodapé na parte inferior da página. Quando o conteúdo aumenta, o rodapé muda para baixo com o conteúdo e continua grudado no fundo.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
Sanjeev
fonte
-lo good..but apenas atualizar .pageContentWrapper {padding-bottom: 100px; / * Altura do rodapé * /}
Subodh Sharma
Muito obrigado. trabalhando no Angular 7
Carlos Torres
Não quero criar uma barra de rolagem desnecessária quando possível.
25419 #
14

No entanto, outra solução realmente simples é esta:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

O truque é usar um display:tablepara todo o documento e display:table-rowcomheight:0 para o rodapé.

Como o rodapé é o único filho do corpo que tem uma exibição como table-row, ele é renderizado na parte inferior da página.

Jose Rui Santos
fonte
Eu amo tabelas css, mas elas criam um problema abaixo da linha que é bem estranho: stackoverflow.com/questions/24898115/…
Costa /
11
Essa solução não parece estar funcionando completamente - o Firefox ignora a altura 0. do rodapé. Usei a altura 1px ou até 1%. Edge, IE11, Chrome e Safari móvel está feliz com 0.
Kitet
Eu realmente amo essa solução. Mas quando eu construo meu layout como este, o cálculo do navegador de elementos filho é dividido. Digamos que queremos ter um contêiner na parte superior da página e, na height: 100%verdade, ele deve ser 100% quando a taxa de exibição é de 1/1 (quadrado). Quando a janela de visualização aumentar, a altura (paisagem) será superior a 100% e, se mais estreita (retrato), menor que 100%. Portanto, a altura é proporcional à largura da janela. Tentei resolvê-lo com outro invólucro, mas isso não funcionou. Alguém tem uma solução ou pelo menos uma dica ???
Axel
@Axel Nesta versão , adicionei uma div azul na parte superior com 100% de altura que ocupa toda a altura (menos a altura do rodapé), independentemente da largura da janela de exibição. Eu acho que você pode ter outros CSS bagunçando as coisas. Tente criar uma versão minimizada do seu problema com base na minha jsFiddle originais
José Rui Santos
@JoseRuiSantos Muito obrigado pela sua resposta. Parece ser um bug do FireFox. Veja a captura de tela
Axel
8

Uma solução flexível muito simples que não assume alturas fixas ou muda de posição dos elementos.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Suporte do navegador

Todos os principais navegadores, exceto IE11 e abaixo.

Certifique-se de usar o Autoprefixer para prefixos apropriados.

Mostrar snippet de código

m.spyratos
fonte
funcionou como um encanto! mesmo para res mais de 4k rodapé fica na parte inferior
Arpan Banerjee
7

Uma coisa a ser cautelosa são os dispositivos móveis, pois eles implementam a ideia da viewport de uma maneira 'incomum':

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

Como tal, usando position: fixed; (como já vi recomendado em outros lugares) geralmente não é o caminho a percorrer. Claro, isso depende do comportamento exato que você procura.

O que eu usei e funcionou bem em computadores e dispositivos móveis é:

<body>
    <div id="footer"></div>
</body>

com

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
Ben Jackson
fonte
6

Faça isso

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Você também pode ler sobre o Flex, suportado por todos os navegadores modernos

Atualização : Eu li sobre o flex e tentei. Funcionou para mim. Espero que faça o mesmo por você. Aqui está como eu implementei. Aqui principal não é o ID, é o div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

Aqui você pode ler mais sobre o flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Lembre-se de que ele não é suportado por versões mais antigas do IE.

Aarth Tandel
fonte
11
Esta é a melhor resposta na prática. Usar flex-grow: 1algo acima do rodapé manterá o rodapé na parte inferior corretamente.
iBug
5

Acabei de responder como pergunta semelhante aqui:

Posicione o rodapé na parte inferior da página com o cabeçalho fixo

Sou bastante novo em desenvolvimento web, e sei que isso já foi respondido, mas essa é a maneira mais fácil de encontrar para resolvê-lo e acho que de alguma forma é diferente. Eu queria algo flexível, porque o rodapé do meu aplicativo da web tem uma altura dinâmica, acabei usando o FlexBox e um espaçador.

  1. Comece definindo a altura do seu html e corpo
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

Estou assumindo um columncomportamento para o nosso aplicativo, caso você precise adicionar um cabeçalho, herói ou qualquer conteúdo alinhado verticalmente.

  1. Crie a classe espaçador
.spacer {
    flex: 1; 
}
  1. Então, mais tarde, seu HTML pode ser algo como 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Você pode jogar aqui https://codepen.io/anon/pen/xmGZQL

Camo
fonte
5

Isso é conhecido como rodapé fixo. Uma pesquisa no google para ele traz muitos resultados. Um rodapé fixo de CSS é o que eu usei com sucesso. Mas tem mais.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
Expandir snippet

Fonte para este código

Paolo Bergantino
fonte
3

Meu método jquery, este coloca o rodapé na parte inferior da página se o conteúdo da página for menor que a altura da janela ou apenas o rodapé após o conteúdo:

Além disso, manter o código em seu próprio gabinete antes de outro código reduzirá o tempo necessário para reposicionar o rodapé.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
Sam Jones
fonte
3

Eu mesmo estive investigando esse problema. Eu já vi algumas soluções e cada uma delas teve problemas, geralmente envolvendo alguns números mágicos.

Então, usando as práticas recomendadas de várias fontes, eu vim com esta solução:

http://jsfiddle.net/vfSM3/248/

O que eu queria alcançar especificamente aqui era fazer o conteúdo principal rolar entre o rodapé e o cabeçalho dentro da área verde.

aqui está um css simples:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
Husayt
fonte
3
Eu odeio sites criados assim. Por que você deseja restringir a quantidade de texto que posso ler ao mesmo tempo? Não preciso ver o cabeçalho e o rodapé o tempo todo, sei onde encontrá-los quando os quero.
Tarmil
11
@Tarmil dê uma olhada no numerics.info . Você vê agora quando isso pode ser útil?
husayt
3

Foi assim que resolvi o mesmo problema

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
Expandir snippet

Nemus
fonte
3 
footer {
  margin-top:calc(5% + 60px);
}

Isso funciona bem

Karthikaeyan
fonte
2

Basta personalizar a seção de rodapé

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>
rashedcs
fonte
Não está funcionando. Ele sempre fica no fundo, mesmo se tivermos uma página muito grande. Ele não pode rolar com todas as páginas, mas apenas se mantém no fundo.
FWd82 17/04/19
Não funciona O rodapé está no topo do conteúdo.
Indolentdeveloper
1

aqui estão meus dois centavos. Em comparação com outras soluções, não é necessário adicionar contêineres extras. Portanto, esta solução é um pouco mais elegante. Abaixo do exemplo de código, explicarei por que isso funciona.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

Portanto, a primeira coisa que fazemos é tornar o maior contêiner (html) 100%. A página html é tão grande quanto a própria página. Em seguida, definimos a altura do corpo, que pode ser maior que 100% da tag html, mas deve ser pelo menos tão grande, portanto usamos 100% de altura mínima.

Também tornamos o corpo relativo. Relativo significa que você pode mover o elemento do bloco em relação à sua posição original. Nós não usamos isso aqui, no entanto. Porque parente tem um segundo uso. Qualquer elemento absoluto é absoluto para a raiz (html) ou para o primeiro pai / avô relativo. É isso que queremos, queremos que o rodapé seja absoluto, relativo ao corpo, ou seja, o fundo.

O último passo é definir o rodapé para absoluto e inferior: 0, que o move para a parte inferior do primeiro pai / avô que é relativo (corpo do curso).

Agora ainda temos um problema para corrigir: quando preenchemos a página completa, o conteúdo fica abaixo do rodapé. Por quê? bem, porque o rodapé não está mais dentro do "fluxo html", porque é absoluto. Então, como podemos corrigir isso? Adicionaremos o fundo de preenchimento ao corpo. Isso garante que o corpo seja realmente maior do que o conteúdo.

Espero ter deixado muito claro para vocês.

David
fonte
1

Um liner dinâmico usando jQuery

Todos os métodos CSS que encontrei são muito rígidos. Além disso, definir o rodapé como fixednão é uma opção se isso não fizer parte do design.

Testado em:

  • Chrome: 60
  • FF: 54
  • IE: 11

Supondo esse layout:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

Use a seguinte função jQuery:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

O que isso faz é definir o min-heightpara #contenta altura da janela - a altura do rodapé que sempre que pode ser no momento.

Como usamos min-height, se a #contentaltura excede a altura da janela , a função é degradada normalmente e não afeta nada, pois não é necessária.

Veja em ação:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Expandir snippet

Mesmo trecho no JsFiddle

Bônus:

Podemos levar isso adiante e fazer com que essa função se adapte à altura do visualizador dinâmico redimensionada da seguinte forma:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Expandir snippet

Eu haz kode
fonte
1

Você consegue fazer isso

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
Abdallah Abdillah
fonte
0

Basta definir o html, body e as outras linhas, exceto o rodapé, para 100%. por exemplo

<body>
<header></header>
<content></content>
<footer></footer>

o css se torna 

html, body, header, content{
height:100%;
}
Olatunde G.
fonte
0 
<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
San Jaisy
fonte
0

Que tal:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
novecentonove
fonte
Embora esse código possa responder à pergunta, fornecer um contexto adicional a respeito de por que e / ou como esse código responde à pergunta melhora seu valor a longo prazo.
β.εηοιτ.βε
-1

Eu usei em meus muitos projetos e nunca tive nenhum problema :)

para sua referência, o código está no snippet 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
Expandir snippet

Santosh Khalse
fonte