Faça com que a div fique na parte inferior do conteúdo da página o tempo todo, mesmo quando houver barras de rolagem

262

CSS Push Div para o final da página

Por favor, olhe para o link, quero o oposto: quando o conteúdo ultrapassa o limite das barras de rolagem, quero que meu rodapé esteja sempre na parte inferior completa da página, como Stack Overflow.

Eu tenho uma div com id="footer"e este CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

Mas tudo o que faz é ir para a parte inferior da janela de visualização e permanecer lá, mesmo se você rolar para baixo, para que não fique mais na parte inferior.

Imagem: Exemplo

Desculpe, se não esclarecido, não quero que seja corrigido, apenas para estar na parte inferior real de todo o conteúdo.

css positioning css-position footer H Bellamy
fonte
1
tente position:fixed, no entanto, que não será exatamente a melhor maneira de fazê-lo
RedDevil
Tente a posição: relativa no corpo.
1
você não fechou o seu; após posição: absoluto. teria funcionado perfeitamente de outra maneira!
AlexHighHigh

Respostas:

546

É exatamente para isso que position: fixedfoi projetado:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Aqui está o violino: http://jsfiddle.net/uw8f9/

Joseph Silber
fonte
65
Essa solução não é boa para 90% dos casos. se você redimensionar sua janela, seu rodapé cobrirá outro conteúdo e não parará no final do seu conteúdo
vsync 28/10/12
10
@aroth é porque são duas soluções totalmente diferentes. Esta solução manterá o rodapé na parte inferior da área visual da tela o tempo todo. A solução alternativa mantém o rodapé na parte inferior da tela ou na parte inferior da página, dependendo de qual é maior - qual foi o pedido do solicitante.
Minha cabeça dói
6
@MyHeadHurts - Você está absolutamente certo. Depois de responder, percebi que não era isso que o OP queria, mas deixei aqui para pessoas que procuram um rodapé fixo simples. A partir dos comentários (e votos), parece que muitas pessoas estão lutando com esse recurso básico de CSS.
Joseph Silber
1
@MyHeadHurts - Justo, embora para o meu dinheiro ainda sejam basicamente os mesmos. O conteúdo rola por baixo do fixedrodapé, quando há conteúdo suficiente para isso. Isso é bom o suficiente para mim. Obviamente, posso ver como rodapés muito grandes, como o que eles têm no stackoverflow, não funcionariam bem com a fixedabordagem, mas, para um rodapé básico de uma linha, essa abordagem funciona bem na minha opinião.
Aroth
@ Aroth Concordo, esta é uma boa solução e tudo depende do que você deseja. Eu estava apenas apontando por que uma solução era mais complicada que a outra -> elas não fazem a mesma coisa.
Minha cabeça dói
188

Infelizmente, você não pode fazer isso sem adicionar um pouco de HTML extra e ter um pedaço de CSS dependente de outro.

HTML

Primeiro você precisa envolver seu header, footere #bodyem uma #holderdiv:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

Em seguida, defina height: 100%como htmle body(corpo real, não sua #bodydiv) para garantir que você possa definir a altura mínima como uma porcentagem nos elementos filho.

Agora, defina min-height: 100%a #holderdiv para preencher o conteúdo da tela e use-a position: absolutepara sentar o rodapé na parte inferior da #holderdiv.

Infelizmente, você deve aplicar-se padding-bottomà #bodydiv que tem a mesma altura que a footerpara garantir que footerela não fique acima de qualquer conteúdo:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

Exemplo de trabalho, corpo curto: http://jsfiddle.net/ELUGc/

Exemplo de trabalho, corpo longo: http://jsfiddle.net/ELUGc/1/

Minha cabeça dói
fonte
não consigo entender por que width: 100%; é necessária
Somnath Kharat
4
@sTACKoVERFLOW - Se você não especificar um width ou ambos left e right, em seguida, os valores são definidos como autoeo elemento será moldado para caber seu conteúdo. Especificando width: 100% ou left: 0 e right:0assegurando que o elemento absolutamente posicionado tenha toda a largura do elemento do contêiner
My Head Hurts
Eu estava procurando um comportamento semelhante, mas no meu caso a div #body é flutuada, por exemplo, "float: left". O exemplo do corpo curto funciona, mas o exemplo do corpo longo não. Alguma sugestão de como eu posso obter o comportamento desejado usando float na div #body.
Jatin
@Ian disse, em uma resposta porque ele não tinha representante suficiente para comentar: Se você está tendo problemas no asp.net com a resposta de 'My Head Hurts' - você precisa adicionar 'height: 100%' ao principal tag FORM gerada, além de tags HTML e BODY para que isso funcione.
msouth
Se você está tentando chegar a este trabalho dentro de uma div em vez de dentro de todo o corpo, certifique-se de especificar height=100%em todos os seus elementos contendo, incluindo <form>elementos.
Ben Caine
13

Apenas funcionou para outra solução, como no exemplo acima, tenho um bug (algum erro) para mim. Variação da resposta selecionada.

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

para layout html

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

Bem, dessa forma, não há suporte para navegador antigo, no entanto, é aceitável que o navegador antigo role 30px para exibir o rodapé

Anônimo
fonte
5

Sei que ele diz que não deve ser usado para 'responder a outras respostas', mas infelizmente não tenho representante suficiente para adicionar um comentário à resposta apropriada (!), Mas ...

Se você está tendo problemas no asp.net com a resposta de 'My Head Hurts' - é necessário adicionar 'height: 100%' à tag FORM principal gerada, bem como às tags HTML e BODY para que isso funcione.

Ian
fonte
4

Você não fechou o seu; após posição: absoluto. Caso contrário, o código acima teria funcionado perfeitamente!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
AlexHighHigh
fonte
3

Gostaria de comentar se pudesse, mas ainda não tenho permissões, por isso postarei uma dica como resposta, para um comportamento inesperado em alguns dispositivos Android:

Posição: corrigida funciona apenas no Android 2.1 a 2.3 usando a seguinte metatag: 

<meta name="viewport" content="width=device-width, user-scalable=no">.

consulte http://caniuse.com/#search=position

Tarciso Junior
fonte
2

Esta é uma solução intuitiva usando o comando viewport que apenas define a altura mínima para a altura da viewport menos a altura do rodapé.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
Obromios
fonte
1

Resolvi um problema semelhante colocando todo o meu conteúdo principal em uma tag div extra (id = "outer"). Em seguida, movi a tag div com id = "footer" para fora dessa última tag div "externa". Eu usei CSS para especificar a altura de "externo" e especifiquei a largura e a altura do "rodapé". Também usei CSS para especificar a margem esquerda e a margem direita do "rodapé" como automático. O resultado é que o rodapé fica firmemente na parte inferior da página e rola com a página também (embora ainda apareça dentro da div "externa", mas felizmente fora da div principal "conteúdo". O que parece estranho, mas é onde eu quero).

David B
fonte
1

Eu só quero acrescentar - a maioria das outras respostas funcionou bem para mim; no entanto, demorou muito tempo para fazê-los funcionar!

Isso ocorre porque a configuração height: 100%apenas pega a altura da div pai!

Portanto, se todo o seu html (dentro do corpo) se parecer com o seguinte:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

Então, o seguinte ficará bem:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

... como "suporte" pegará sua altura diretamente do "corpo".

Parabéns ao My Head Hurts, cuja resposta foi a que acabei por começar a trabalhar!

Contudo. Se o seu html estiver mais aninhado (porque é apenas um elemento da página inteira, ou está dentro de uma determinada coluna, etc.), você precisa garantir que todos os elementos contidos também tenham sido height: 100%definidos na div. Caso contrário, as informações de altura serão perdidas entre "corpo" e "suporte".

Por exemplo, a seguir, onde adicionei a classe "altura total" a todas as div para garantir que a altura desça até os elementos de cabeçalho / corpo / rodapé:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

E lembre-se de definir a altura na classe de altura total no css:

#full-height{
    height: 100%;
}

Isso corrigiu meus problemas!

Tim L
fonte
0

se você tem um rodapé de altura fixa (por exemplo, 712px), é possível fazer isso com js da seguinte forma:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
George Carlin
fonte
0 
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
Praveen Kundu
fonte
Por favor, descreva em sua resposta, qual era o problema, e como será esse trecho resolvê-lo, para ajudar os outros a entender esta resposta
FZS
-2

use a classe de inicialização de fundo fixo

<div id="footer" class="fixed-bottom w-100">
Gowtham Sooryaraj
fonte
Não há indicação de que o OP esteja usando o Bootstrap.
TylerH