Rodapé pegajoso do Twitter Bootstrap 3

204

Estou usando o framework de bootstrap do twitter há um bom tempo e eles foram atualizados recentemente para a versão 3!

Estou tendo problemas para colocar o rodapé grudado no fundo, usei o modelo inicial fornecido pelo site de inicialização do twitter, mas ainda sem sorte, alguma idéia?

html css twitter-bootstrap twitter-bootstrap-3 Brad Fletcher
fonte
31
exemplo oficial: getbootstrap.com/examples/sticky-footer-navbar
ptim 10/10
3
@memeLab Por que o exemplo oficial não tem nada sobre a margem inferior do corpo: -60px? Ou eu senti falta ...?
Ganders
Adicionada uma solução somente CSS, permitindo altura variável para o rodapé fixo. Vinculei aqui como, sendo uma nova resposta, está na parte inferior da página.
tao

Respostas:

193

basta adicionar a classe navbar-fixed-bottom ao seu rodapé.

<div class="footer navbar-fixed-bottom">
Jon
fonte
32
este não é o mesmo que rodapé pegajoso
Yura Omelchuk
3
Se você possui cabeçalho e rodapé, perde muito espaço em um dispositivo móvel.
Strattonn
4
@strattonn que é o que consultas de mídia são para
Jacob Raccuia
20
Isso funciona perfeitamente se a página não precisar de rolagem. Mas o rodapé se sobrepõe a mais conteúdo da página. Alguma solução nisso? Obrigado!
Xplora #
1
não tem certeza sobre o problema de sobreposição, mas adicionar margem / preenchimento não resolve o problema?
31415 Jon
152

Referindo-se ao exemplo oficial de rodapé do Boostrap3, não há necessidade de adicionar <div id="push"></div>, e o CSS é mais simples.

O CSS usado no exemplo oficial é:

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

e o HTML essencial:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>

Você pode encontrar o link para este css no código-fonte do exemplo de rodapé .

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

URL completo: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

tkymtk
fonte
21
O HTML e CSS no exemplo oficial de rodapé agora é bem diferente do que é descrito aqui, por exemplo, nenhuma div 'wrap' é mais usada.
BNAI
52

Aqui está um método que adiciona um rodapé fixo que não requer CSS ou Javascript adicional além do que já está no Bootstrap e não interfere no rodapé atual.

Exemplo aqui: rodapé fácil

Basta copiar e colar isso diretamente no seu código. Sem confusão, sem confusão.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
anataliocs
fonte
4
Muito bom e rápido. Também pode ser responsivo. Mas é necessário adicionar espaço adicional na parte inferior do conteúdo da página para que não fique oculto pelo rodapé. O espaço deve ter a altura igual à altura do rodapé. Você pode mostrar a melhor forma de fazer isso? BTW "não requer CSS" está tecnicamente errado. Deveria ser "não requer nenhum CSS adicional além das classes Bootstrap" .
ADTC
1
Eu amo que isso aproveita o que existe no bootstrap. Não consegui obter as outras respostas principais para o trabalho, mas colei isso na minha página e no rodapé. Obrigado!
haakon.io
34

Além do CSS que você acabou de adicionar, lembre-se de adicionar o push div antes de fechar o wrap div

A estrutura básica para o HTML é 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Visualização ao vivo
Editar visualização

David Taiaroa
fonte
Se o conteúdo da página for maior que a exibição disponível, o rodapé será pressionado. Gostaria que o rodapé para realmente ficar colada ao fundo (como fixo-navbar-bottom)
blueFast
hey @delavnog, algo assim funcionaria para você? codepen.io/panchroma/pen/wMXWpY . Os únicos bits importantes para você são o HTML na linha 647 e o CSS
David Taiaroa
@delavnog, a mesma ideia com conteúdo mínimo na página codepen.io/panchroma/pen/JGZKqy #
David Taiaroa
Obrigado, isso é ótimo! Agora, se eu pudesse centralizar verticalmente a div principal entre nav e rodapé, isso seria incrível! Editted seu codepen: codepen.io/anon/pen/rxKMaW (eu tinha para adicionar uma margem para o corpo, porque o nav está comendo a parte de cima do conteúdo)
blueFast
@ delavnog, aqui está um começo se o corpo principal não estiver muito alto. Seria necessário mais trabalho embora por mais conteúdo: codepen.io/panchroma/pen/vLrXMq
David Taiaroa
30

Aqui está o código simplificado do Sticky Footer a partir de hoje, porque eles estão sempre otimizando e isso é BOM:

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
Leniel Maccaferri
fonte
1
Solução perfeita. Era isso que eu estava procurando.
Levimatt
1
Infelizmente, este rodapé tem tamanho fixo. Às vezes, quando o rodapé é dinâmico, pode ser maior ou menor que sua altura em css.
23W
27

Estou um pouco atrasado sobre o assunto, mas me deparei com este post, pois acabei de ser mordido por essa pergunta e finalmente encontrei uma maneira muito fácil de superar isso, basta usar um navbarcom a navbar-fixed-bottomclasse ativada. Por exemplo:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

iMil
fonte
Gosto da simplicidade e eficácia da sua resposta, que por sinal é uma resposta inteligente. Muitas respostas para o mesmo problema estão cheias de perguntas e coisas complicadas. Obrigado cara.
Digitai
1
É meia solução, você ainda precisa cuidar das sobreposições do conteúdo da sua página, se o redimensionar.
Baldráni
@ Baldráni Não é uma solução completa, se sobrepõe trabalho bem se você usar linha Bootstrap e col no html rodapé (que é o que você deve fazer de qualquer maneira)
Tino Mclaren
Este não é um rodapé pegajoso. É uma barra de navegação inferior fixa, adequada apenas para o conteúdo da barra de navegação e se sobrepõe ao conteúdo da página.
Zim
10

Aqui está minha solução atualizada para esse problema. 

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

E use-o assim: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

Ou 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
zee
fonte
4
Essa não é uma boa solução, pois o rodapé é fixo, o que significa que sobrepõe o conteúdo da página (se houver). Tente adicionar algumas some text<br>linhas antes do rodapé e reduza o tamanho da janela.
jmarceli
@ user2041318: sim, isso é horrível ... obrigado por apontar isso.
Sebastian
Isso foi corrigido de acordo com o comentário de jmarceli. O rodapé não está mais fixo.
Zee
3

O exemplo persistente não funciona para mim. Minha solução:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
Andi Giga
fonte
CSS simples e antiquado. Tarefa concluída. Acho divertido como são complicadas algumas das respostas mais bem avaliadas. O Bootstrap não deveria facilitar nossas vidas? 😂
Kal
2

O impulso divdeve ir logo após o wrap, NÃO dentro .. assim como este 

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
Joseph
fonte
2

Respondida pelo OP:

Adicione isso ao seu arquivo CSS.

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
CodeCaster
fonte
2

Eu queria um rodapé flexível , e é por isso que vim aqui. As melhores respostas me levaram na direção certa.

O rodapé atual do Bootstrap 3 css (tamanho fixo) atual (2 de outubro de 16) fica assim:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Desde que o rodapé tenha um tamanho fixo, a margem inferior do corpo cria um empurrão para permitir que um bolso fique no rodapé. Nesse caso, os dois estão configurados para 60px. Mas se o rodapé não for fixo e exceder a altura de 60 px, ele cobrirá o conteúdo da página.

Tornar flexível: exclua a margem do corpo css e a altura do rodapé. Em seguida, adicione JavaScript para obter a altura do rodapé e defina o marginBottom do corpo. Isso é feito com a função setfooter (). Em seguida, adicione ouvintes de eventos para quando a página for carregada pela primeira vez e ao redimensionar a execução do setfooter. Nota: Se o rodapé tiver um acordeão ou qualquer outra coisa que acione uma alteração de tamanho, sem redimensionar a janela, você deverá chamar a função setfooter () novamente.

Execute o trecho e, em seguida, tela cheia para demonstrá-lo.

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
Expandir snippet

Mais severo
fonte
2

Isso foi resolvido pelo flexbox, uma vez e para sempre:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

O HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

O CSS

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

.Site-content {
  flex: 1;
}
Konstantin Schubert
fonte
2

Js simples

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

Atualização # 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
fdrv
fonte
1

Para resumir tudo isso, lembre-se de que tudo, exceto o rodapé, deve ter um min-height: 100%pouco menos.

kshirish
fonte
1

Escrevo meu código simplificado de rodapé com preenchimento usando LESS. Essa resposta provavelmente está fora do tópico porque a pergunta não fala sobre preenchimento; portanto, se você estiver interessado, verifique esta postagem para obter mais detalhes.

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
Fred K
fonte
1

Com base na resposta de Jek-fdrv , adicionei um .on('resize', function()para garantir que ele funcione em todos os dispositivos e em todas as resoluções:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
iamchriswick
fonte
1

A versão atual do bootstrap parece não funcionar mais para esta função. Se você baixar o exemplo de sticky-footer-navbar e colocar uma grande quantidade de conteúdo na área principal do corpo, o rodapé será empurrado para baixo na parte inferior da janela de visualização. Não é nada pegajoso.

CJ Catalano
fonte
1

Aqui está uma solução baseada em CSS para um rodapé fixo de altura variável totalmente responsivo.
Vantagem: o rodapé permite altura variável, pois a altura não precisa mais ser codificada em CSS.

Mostrar snippet de código

E aqui está o sem prefixo SCSS(para gulp/ grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
tao
fonte
1

Basta usar o flex! Certifique-se de usar body e main em seu HTML e é uma das melhores soluções (a menos que você precise do suporte do IE9). Não requer uma altura fixa ou semelhante.

Isso é recomendado para o Materialize também!

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

main {
    flex: 1 0 auto;
}
kentor
fonte
0

nas palavras de Haml & Sass, tudo o que é necessário:

Haml for app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass para app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

com base em http://getbootstrap.com/examples/sticky-footer-navbar/

equivalente8
fonte
0

Se você deseja usar a construção de inicialização em classes para o rodapé. Você também deve escrever algum javascript:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

Impedirá a sobreposição de conteúdo pelo rodapé fixo e ajustará padding-bottomquando o usuário alterar o tamanho da janela / tela.

No script acima, assumi que o rodapé é colocado diretamente dentro da tag body, assim:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

Definitivamente, essa não é a melhor solução (devido ao JS que poderia ser evitado), mas funciona sem problemas com sobreposição, é fácil de implementar e responsiva ( heightnão é codificada no CSS).

jmarceli
fonte
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
Expandir snippet

Gpak
fonte
Como isso é pegajoso na parte inferior?
Sebastian
0

Aqui está um rodapé muito simples e limpo que você pode usar no bootstrap. Totalmente ágil!

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

Exemplo: Demonstração do CodePen

Gothburz
fonte
Esta solução deslocará a barra de rodapé para a direita ao abrir o modal de autoinicialização devido ao posicionamento absoluto!
Thethakuri 15/05
0

Usar flexboxé a maneira mais fácil que encontrei, dos caras dos truques de CSS . Isso é verdadeiro, pois funciona quando o conteúdo é <100% da página e> 100% da página:

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

E CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

Observe que isso é independente do bootstrap; portanto, ele funciona com e sem o bootstrap.

bustawin
fonte
0

Você pode simplesmente tentar adicionar uma classe na barra de navegação do rodapé:

navbar-fixed-bottom

Em seguida, crie um CSS chamado custom.css e preenchimento de corpo como este.

body { padding-bottom: 70px; }
Ikram - Ud - Daula
fonte