Bootstrap 3 Empurre o rodapé para baixo. não consertado

177

Estou usando o Bootstrap 3 para um site que estou criando.

Eu quero ter um rodapé como este exemplo. Amostra

Observe que eu não o quero CORRIGIDO, para que o bootstrap navbar-fixed-bottom não resolva o meu problema. Eu só quero que ele esteja sempre na parte inferior do conteúdo e também seja responsivo.

Qualquer guia será muito apreciado.

EDITAR:

Desculpe se eu não estava claro. O que acontece agora é que, quando o corpo do conteúdo não possui conteúdo suficiente. Meu rodapé se move para cima e depois deixa um espaço vazio na parte inferior.

Isto é o que tenho agora para a minha barra de navegação

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
html css twitter-bootstrap footer user3169403
fonte
Você tem um exemplo de código no qual está trabalhando e está lhe dando um problema?
usar o seguinte código
Parece rodapé comum, se você não quiser Fixo, poderá atualizar o estilo. Qual problema você está enfrentando?
Mutant
Quando é a última coisa em seu HTML, ele sempre estará na parte inferior. Pergunta confusa que precisa de um exemplo de código para entender qual é o problema.
Joe Conlin
stackoverflow.com/questions/643879/…
davidpauljunior
@davidpauljunior: Esses são rodapés pegajosas que não é o que eu estou procurando
user3169403

Respostas:

124

Veja o exemplo abaixo. Isso posicionará o rodapé para ficar na parte inferior se a página tiver menos conteúdo e se comportar como um rodapé normal se a página tiver mais conteúdo.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

ATUALIZAÇÃO : A nova versão do Bootstrap demonstra como adicionar rodapé fixo sem adicionar um wrapper. Consulte a resposta de Jboy Flaga para obter mais detalhes.

Surjith SM
fonte
Suas ligações são quebradas
Halter
2
Por que existem duas definições de propriedade height no wrapper?
Julio
O @HardlyNoticeable tem largura mínima para forçar o wrapper, mesmo que o conteúdo seja menor.
Surjith SM
Ainda me pergunto por que existem duas definições de propriedades de altura. Você não respondeu @SurjithSM
Erowlin /
@Elinlin Isso é um erro. você não precisava de duas propriedades de altura. Apenas altura mínima será suficiente, editou a resposta.
Surjith SM
316

Há uma solução simplificada do bootstrap aqui (onde você não precisa criar uma nova classe): http://getbootstrap.com/examples/sticky-footer-navbar/

Quando você abrir essa página, clique com o botão direito do mouse em um navegador e em "View Source" e abra o arquivo sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar. css )

você pode ver que você só precisa desse 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;
}

para este HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>
Jboy Flaga
fonte
19
Essa (dos documentos / exemplos do Bootstrap) deve ser a resposta aceita.
Richardm
5
Para mim, isso não funciona porque meu rodapé é bastante alto. É ótimo se você quer apenas um parágrafo, mas o meu tem várias colunas - usando este método, eu acabar com uma margem abaixo do rodapé quando eu descer para tamanhos menores
NightMICU
9
Não é esta solução de rodapé pegajosa de Bootstraps? Eu não acho que o OP quis dizer isso. Para mim, com uma página longa, meu rodapé apareceu na parte inferior da tela, mas não na parte inferior do conteúdo (ou seja, sobre o conteúdo). Eu tive que mudar de posição: absoluto; para relativo (na classe .footer) para que isso funcione.
Tino Mclaren
24
Esta seria a resposta correta, se este tema não ter "não fixo" no título ...
ruudy
1
isso só funciona para rodapés com tamanho fixo, eu prefiro a solução de Philip Walton como proposto por @ChristopherTan que é super slim e independente da altura do rodapé
Buergi
16

use o flexbox, pois você pode usá-lo à sua disposição. A solução oferecida pelo bootstrap 4 ainda está procurando conteúdo sobreposto no layout responsivo, por exemplo: ele será interrompido na exibição móvel, o truque mais interessante é usar a demonstração da solução flexbox mostrada aqui :( https://philipwalton.github.io / resolvido por flexbox / demos / sticky-footer / ) dessa forma, não precisamos lidar com o problema de altura fixa, que é uma solução obsoleta até agora ... essa solução funciona para o bootstrap 3 e 4, conforme o que você estiver usando.

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

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

.Site-content {
  flex: 1;
}
Christopher Tan
fonte
1
Esta é uma solução muito inteligente. Eu acho que o CSS tem muito a oferecer, que nem sabemos como tirar o máximo proveito dele.
Gilbert
2
Eu amo essa solução. Surpreendente.
Bagus Aji Santoso
14

ATUALIZAÇÃO: Isso não responde diretamente à pergunta na íntegra, mas outros podem achar isso útil.

Este é o HTML do seu rodapé responsivo

<footer class="footer navbar-fixed-bottom">
     <div class="container">
     </div>
</footer>

Para o CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

NOTA: No momento da postagem desta pergunta, as linhas de código acima não pressionam o rodapé abaixo do conteúdo da página; mas evitará que o rodapé rastreie no meio da página quando houver pouco conteúdo na página. Para um exemplo que empurra o rodapé abaixo do conteúdo da página, dê uma olhada aqui http://getbootstrap.com/examples/sticky-footer/

Rex CoolCode Charles
fonte
Essa é realmente uma solução ruim, pois o rodapé encobre o conteúdo principal quando eles se encontram. Você precisa definir o padding-bottomcontêiner de conteúdo principal igual à altura do rodapé. E você precisa fazer isso dinamicamente na página loade nos resizeeventos e também no rodapé DOMSubtreeModified.
tao
9

Para as pessoas que ainda lutam e a solução respondida não funciona exatamente como você deseja, aqui está a solução mais simples que encontrei.

Embrulhe seu conteúdo principal e atribua a ele uma altura mínima de exibição. Ajuste os 60 para o valor que seu estilo precisar.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

É isso e funciona muito bem.

eGlu
fonte
Eu tive o mesmo problema que o em questão. Depois de tentar quase todas as respostas bem classificadas aqui, essa foi a única que funcionou para mim. E funcionou em todos os tamanhos. A única alteração que fiz foi "altura mínima: 70vh". Isso dependerá do tamanho do cabeçalho e rodapé do seu site.
Arfath
Isso deve ser maior, funciona exatamente como solicitado.
yam
Isso funcionou para as minhas necessidades. Basta ajustar o valor da altura mínima até obter o resultado desejado.
sawyerrken
Maravilhoso, esta é a solução mais simples e eficiente para o problema de posicionamento do rodapé!
Prahlad Yeri
5

Galen Gidman postou uma solução realmente boa para o problema de um rodapé pegajoso responsivo que não tem uma altura fixa. Você pode encontrar a solução completa em seu blog: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }
weiy
fonte
Isso parece ser compatível com o bootstrap e, portanto, deve ser a resposta aceita, imho. Não é perfeito, pois uma barra de rolagem horizontal parece estar aparecendo.
Florian Mertens
Florian: Nenhuma barra de rolagem horizontal para mim.
HardlyNoticeable
4

Para uma solução CSS pura, role após a 2ª <hr>. A primeira é a resposta inicial (devolvida em 2016)

A principal falha das soluções acima é que elas têm uma altura fixa para o rodapé.
E isso simplesmente não funciona no mundo real, onde as pessoas usam um zilhão de dispositivos e têm o mau hábito de girá-los quando você menos espera e ** Poof! ** lá vai o conteúdo da página por trás do rodapé!

No mundo real, você precisa de uma função que calcule a altura do rodapé e ajuste dinamicamente o conteúdo da página padding-bottompara acomodar essa altura. E você precisa executar esta pequena função na página loade nos resizeeventos, bem como no rodapé DOMSubtreeModified(apenas no caso de o rodapé ser atualizado dinamicamente de forma assíncrona ou conter elementos animados que mudam de tamanho quando interagidos).

Aqui está uma prova de conceito, usando jQuery v3.0.0e Bootstrap v4-alpha, mas não há razão para que ele não funcione nas versões inferiores de cada um.

Mostrar snippet de código

Inicialmente, publiquei esta solução aqui, mas percebi que ela pode ajudar mais pessoas se postada nesta pergunta.

Nota: Eu tenho propositadamente embrulhou o $([selector]).accomodateFooter()como um plugin jQuery, para que pudesse ser executado em qualquer elemento DOM, como na maioria dos layouts não é o $('body')'s bottom-paddingque as necessidades de ajuste, mas alguma página invólucro elemento com position:relative(geralmente o pai imediato do footer) .

Edição posterior (mais de 3 anos após a resposta inicial):

Neste ponto, não considero mais aceitável o uso do JavaScript para posicionar um rodapé de conteúdo dinâmico na parte inferior da página. Isso pode ser alcançado apenas com CSS, usando flexbox, extremamente rápido e em vários navegadores.

Aqui está:

Mostrar snippet de código

tao
fonte
3

Este método usa marcação mínima. Basta colocar todo o seu conteúdo em um .wrapper que tenha um fundo de preenchimento e um fundo de margem negativo igual à altura do rodapé (no meu exemplo, 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>
Vin
fonte
2

Ou isto

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>
AnBisw
fonte
1

Para o Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>
shilovk
fonte
2
A pergunta afirma especificamente que navbar-fixed-bottomNÃO é o que resolve o problema.
P4sh4
1

Nenhuma dessas soluções funcionou perfeitamente para mim porque usei a classe navbar-reverse no rodapé. Mas recebi uma solução que funcionava e sem Javascript. Utilizou o Chrome para ajudar na formação de consultas de mídia. A altura do rodapé muda à medida que a tela é redimensionada, assim você deve prestar atenção e ajustar em conformidade. O conteúdo do seu rodapé (defino id = "rodapé" para definir meu conteúdo) deve usar postion = absolute e bottom = 0 para mantê-lo na parte inferior. Também largura: 100%. Aqui está o meu CSS com consultas de mídia. Você precisará ajustar a largura mínima e a largura máxima e adicionar ou remover alguns elementos:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}
Brian Edwards
fonte
0

Isto é o que funcionou para mim usando o Flexbox :

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

.body-content {
    flex: 1 0 auto;
    width: 100%;
}

.footer {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    flex: none;
}

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

Leniel Maccaferri
fonte