Rodando o rodapé para a parte inferior da página, bootstrap do twitter

306

Eu geralmente estou familiarizado com a técnica de liberar um rodapé usando css.

Mas estou com alguns problemas para fazer com que essa abordagem funcione para o bootstrap do Twitter, provavelmente devido ao fato de o bootstrap do Twitter ser de natureza responsiva. Usando o bootstrap do Twitter, não consigo colocar o rodapé na parte inferior da página usando a abordagem descrita na postagem do blog acima.

css twitter-bootstrap footer Calvin Cheng
fonte

Antes do teste de todas as respostas abaixo Tenha em mente o OP quer tê-lo trabalhando com bootstrap.As Twitter não é uma obrigação, obras Twitter Bootstrap com jQuery, o que significa que é Javascript enabled.For essa razão apenas testar a minha resposta: stackoverflow.com / questions / 10099422 /…

HenryW

4

Exemplo oficial: getbootstrap.com/examples/sticky-footer-navbar/…

user

1

O link está quebrado! Alguém pode consertar o link de exemplo oficial?

precisa saber é o seguinte

1

@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar pode se tornar uma versão mais antiga no futuro por causa de 4.0, eu acho.

Ammad Khalid

324

Os trechos aqui funcionam muito bem para o bootstrap

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

Chuan Yeong
fonte

Esta é a melhor solução que eu tentei até agora. Aceitou isso como a resposta.

Calvin Cheng

Oi, eu implementei esse método, ele funciona muito bem, mas agora tenho alguns problemas com a exibição da página no iphone (a página é ampliada). Alguma idéia de qual é o problema? Aqui estão alguns detalhes: stackoverflow.com/questions/18621090/…

pupadupa 5/13/13

94

Apenas no caso de você ler esta resposta e não rolar para baixo, vale a pena examinar as outras respostas.

MattyW

4

especialy esta: stackoverflow.com/questions/10099422/...

HenryW

1

Este é o melhor método que encontrei para o Bootstrap. Para capacidade de resposta do dispositivo lembre-se de usar consultas de mídia para atualizar #main e alturas .footer para diferentes tamanhos de tela

SyntaxGoonoo

467

Agora isso está incluído no Bootstrap 2.2.1.

Bootstrap 3.x

Use o componente navbar e adicione a .navbar-fixed-bottomclasse:

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

Bootstrap 4.x

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

Não se esqueça de adicionar body { padding-bottom: 70px; }ou, caso contrário, o conteúdo da página poderá ser coberto.

Documentos: http://getbootstrap.com/components/#navbar-fixed-bottom

sanon
fonte

35

@ChuanYeong Infelizmente não há navbar-static-bottom.

Lawrence Woodman

25

@ MikeCurry ele não perguntou sobre um rodapé fixo, mas um que "preenche" o espaço vazio, se a sua página não tiver conteúdo suficiente para que o rodapé fique no fundo. Se seu rodapé é apenas informativo, um fixo está ocupando apenas um espaço valioso.

Rdlu

22

Este não é um rodapé pegajoso, porque é usado na posição: fixo; o que não é certo

Furkat U.

9

Sim, esta solução é liberada apenas na parte inferior da janela de visualização e não na parte inferior da página. ou seja, o rodapé está sempre visível.

RISM

3

Tive que rebaixar a resposta porque isso causava confusão. O OP não quer um rodapé pegajoso.

HenryW

77

Um exemplo de trabalho para o Twitter bootstrap NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Versão que sempre é atualizada caso o usuário abra devtools ou redimensione a janela.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

Você precisa de pelo menos um elemento com um `#footer`

Quando não desejar a barra de rolagem, se o conteúdo couber na tela, altere o valor de 10 para 0.
A barra de rolagem será exibida se o conteúdo não couber na tela.

HenryW
fonte

9

Sim, eu fui com este também. CSS pode ser tão estúpido às vezes. Não que isso seja impossível, mas soluções de uso geral podem ser difíceis de encontrar, e consertar coisas irritantes como essas em nossos layouts não deve fazer viagens para troca de pilhas, várias revisões de essência, testes entre navegadores e eventual rendição a um JS simples truque. Sim, me sinto um pouco suja, mas pelo menos funciona.

meecect 22/10/14

3

todas as soluções que olhei estão erradas. Este é o ÚNICO que realmente faz o que deveria fazer - coloque o rodapé na parte inferior da página, sem ocultar qualquer conteúdo se o navegador for redimensionado.

24414 Dave

13

Ele didnt tranquila trabalho, bem como o esperado para me, ainda, uma das melhores respostas, eu fixo meu problema, substituindo $('#footer').height();com$('#footer').outerHeight();

DarkMukke

3

Ótima resposta! Eu tinha um par adaptações que eu acho que melhorá-lo aqui: stackoverflow.com/a/36385654/8207

Cory

6

A melhor resposta que encontrei. Se você deseja que ele funcione após o redimensionamento da janela, basta colocar o código principal da resposta dentro $(window).resize(function() {//main code goes here});e chamar $(window).resize();para defini-lo quando a página for carregada.

Szymon Sadło 22/08/16

36

Veja como implementar isso na página oficial:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Acabei de testar agora e funciona muito bem! :)

HTML

<body>

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

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</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.</p>
      </div>

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

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

O código CSS relevante é este:

/* 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 !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

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

Leniel Maccaferri
fonte

7

Obrigado por postar isso, foi definitivamente a melhor solução (para não mencionar a única que funcionou) para o meu projeto em particular, e é claro que é legal que seja diretamente do próprio projeto.

quer

1

Não sei qual era o acordo, mas não consegui fazê-lo funcionar sem adicionar um pergaminho às páginas. Acabei alterando o CSS .wrapper para que a altura mínima fosse "calc (100% - 120px)", onde 120px é a altura do rodapé e removi o <div id = "push"> </div> do html pois não parecia estar fazendo nada além de adicionar altura à página que eu não precisava.

jammyman34

36

Para Rodapé fixo , usamos dois DIV'sno HTML para o efeito básico do rodapé fixo. Escreva assim:

HTML

<div class="container"></div>

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

sandeep
fonte

7

Ele disse que está usando o Twitter Bootstrap. Qual seria a maneira mais fácil de integrar isso no Bootstrap sem reescrever completamente o HTML?

Cody Gray

1

Se OP falta é para conseguir o efeito Fixo rodapé então ele tem que mudar sua MarkUp

sandeep

Obrigado! Este foi o único método que realmente funcionou para mim em um site ASP.NET MVC5 que usa o Bootstrap. 1

Yann Duran

30

Exemplo oficial muito mais simples: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

do utilizador
fonte

19

Bem, eu encontrei mistura de navbar-innere navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

Parece bom e funciona para mim

insira a descrição da imagem aqui

Veja exemplo em Fiddle

Maxim Shoustin
fonte

2

solução mais simples e elegante. Ser suspeitoso de casa cerveja seu próprio código css, pois não irá ser compatível com inicialização

1-14x0r

Eu usei isso e tive um problema em um android antigo (talvez froy?) Com páginas mais curtas que a tela. Caso contrário, ele trabalhou bem no FF, Chrome, IE11, iPhone, o Nexus 7.

bnieland

Perfeito e extremamente simples!

ramires.cabral

18

Na versão mais recente do bootstrap 4.3, isso pode ser feito usando a .fixed-bottomclasse

<div class="fixed-bottom"></div>

Aqui está como eu o uso com o rodapé:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Você pode encontrar mais informações na documentação da posição aqui .

Mohamed Ali JAMAOUI
fonte

1

Isso ainda funciona com a versão oficial 4 liberada.

klewis

Observe que o exemplo em getbootstrap.com/docs/4.1/examples/sticky-footer possui um estilo line-height = 60px no elemento footer. Isso não é apenas desnecessário, mas também impede que o rodapé funcione corretamente se for o pai de um ou mais elementos div, o que geralmente é o caso.

precisa saber é o seguinte

13

A resposta de HenryW é boa, embora eu precisasse de alguns ajustes para fazê-lo funcionar como queria. Em particular, o seguinte também trata:

Evitando o "jumpiness" no carregamento da página, primeiro marcando invisível e definindo visível em javascript
Lidar com o navegador redimensiona normalmente
Além disso, definir o rodapé para fazer backup da página se o navegador ficar menor e o rodapé ficar maior que a página
Ajustes da função de altura

Aqui está o que funcionou para mim com esses ajustes:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

Cory
fonte

11

Isso funcionou para mim perfeitamente.

Adicione esta classe navbar-fixed-bottom ao seu rodapé.

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

Eu usei assim:

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

E define para baixo ao longo de toda a largura.

Editar: Isso definirá o rodapé para sempre visível, é algo que você precisa levar em consideração.

sp_omer
fonte

10

Você precisa agrupar sua .container-fluiddiv para que seu rodapé fixo funcione, mas também faltam algumas propriedades em sua .wrapperclasse. Tente o seguinte:

Remova o padding-top:70pxda sua bodytag e inclua-o no seu .container-fluidlugar, da seguinte maneira:

.wrapper > .container-fluid {
    padding-top: 70px;
}

Temos que fazer isso porque pressionar a bodybarra para baixo para acomodar a barra de navegação acaba empurrando o rodapé um pouco mais (70px mais) além da janela de visualização, para obter uma barra de rolagem. Nós obtemos melhores resultados pressionando a .container-fluiddiv.

Em seguida, temos que remover a .wrapperclasse fora de sua .container-fluiddiv e envolvê- #mainla com ela, da seguinte forma:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Seu rodapé, é claro, deve estar fora da .wrapperdiv, remova-o da div `.wrapper e coloque-o do lado de fora, da seguinte forma:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Depois que tudo estiver pronto, empurre o rodapé adequadamente para mais perto da sua .wrapperclasse usando uma margem negativa, da seguinte forma:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

E isso deve funcionar, embora você provavelmente precise modificar algumas outras coisas para fazê-lo funcionar quando a tela for redimensionada, como redefinir a altura da .wrapperclasse, assim:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

Andres Ilich
fonte

9

Esta é a maneira correta de fazer isso com o Twitter Bootstrap e a nova classe navbar-Fixed-bottom: (você não tem idéia de quanto tempo eu passei procurando isso)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Régis B.
fonte

9

Use os utilitários flex embutidos no Bootstrap 4! Aqui está o que eu desenvolvi usando principalmente os utilitários do Bootstrap 4.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

.d-flex fazer da div principal um container flexível
.flex-column na div principal para organizar seus itens flexíveis em uma coluna
min-height: 100vh para a div principal, com um atributo de estilo ou em seu CSS, para preencher a janela de exibição verticalmente
.flex-grow-1 no contêiner, elemento para que o contêiner de conteúdo principal ocupe todo o espaço restante na altura da janela de exibição.

EGhost57
fonte

Em vez min-height: 100vhda min-vh-100classe de Bootstrap pode ser usado.

ikonuk

Esta solução funcionou muito bem, incluindo a sugestão min-vh-100 de @ikonuk

TGR

4

Use o componente navbar e adicione a classe .navbar-Fixed-bottom:

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

adicionar corpo

  { padding-bottom: 70px; }

Arquivo de administrador3
fonte

3

para lidar com layouts de restrição de largura, use o seguinte para não obter cantos arredondados e para que sua barra de navegação fique nivelada nas laterais do aplicativo

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

então você pode usar css para substituir as classes de autoinicialização para ajustar altura, fonte e cor

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

1-14x0r
fonte

3

Você pode usar o jQuery para lidar com isso:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

DucCuong
fonte

2

O único que funcionou para mim !:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

Ricardo
fonte

2

A técnica mais simples é provavelmente usar o Bootstrap navbar-static-bottomem conjunto com a configuração da div principal do contêiner height: 100vh(nova porcentagem da porta de exibição CSS3 ). Isso liberará o rodapé para o fundo.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

Pan Wangperawong
fonte

2

Testado com Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}

Dušan Maďar
fonte

1

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

A altura do rodapé corresponde ao tamanho do recuo inferior do elemento de quebra.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

Sharpless512
fonte

1

Aqui está uma solução para a versão mais recente do Bootstrap (4.3 no momento da escrita) usando o Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

E um exemplo de codepen: https://codepen.io/tillytoby/pen/QPdomR

Tom T
fonte

1

De acordo com o exemplo do Bootstrap 4.3 , caso você esteja perdendo a sanidade como eu, é assim que realmente funciona:

Todos os pais da div rodapé precisam ter height: 100%( h-100classe)
O pai direto do rodapé precisa ter display: flex( d-flexclasse)
O rodapé precisa ter margin-top: auto( mt-autoclasse)

O problema é que, nas estruturas modernas de front-end, geralmente temos invólucros adicionais em torno desses elementos.

Por exemplo, no meu caso, com Angular, compus a visualização de uma raiz de aplicativo separada, componente principal de aplicativo e componente de rodapé - todos os quais adicionaram seu elemento personalizado ao DOM.

Portanto, para fazer funcionar, eu tive que adicionar classes a esses elementos do wrapper: um adicional h-100, movendo o d-flexnível para baixo e movendo o mt-autonível para cima do rodapé (para que na verdade não esteja mais na classe de rodapé, mas no meu <app-footer>costume) elemento).

MrValueType
fonte

Eu tive que colocar class="h-100"a <html>etiqueta também.

22619 Kel Kelola Solaar

1

Use este pedaço de código no bootstrap que funciona

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

Sanjay
fonte

1

Solução Bootstrap v4 +

Aqui está uma solução que não requer repensar a estrutura HTML ou qualquer truque adicional de CSS envolvendo preenchimento:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Observe que esta solução permite rodapés com alturas flexíveis, o que é particularmente útil ao projetar páginas para vários tamanhos de tela com quebra de conteúdo quando reduzidas.

Por que isso funciona

style="height:100%;"faz com que a <html>marca ocupe todo o espaço do documento.
d-flexconjuntos de classes display:flexpara nossa <body>tag.
flex-columnconjuntos de classes flex-direction:columnpara nossa <body>tag. Seus filhos ( <header>, <main>, <footer>e qualquer outra criança direta) estão agora alinhados verticalmente.
h-100conjuntos de classes height:100%para a nossa <body>tag, o que significa que cobrirá a tela inteira verticalmente.
classe flex-grow-1sets flex-grow:1a nossa <main>, instruindo-o de forma eficaz para preencher qualquer espaço vertical restante, totalizando, assim, para a altura vertical de 100% nos propusemos antes na nossa <body>tag.

Demonstração de trabalho aqui: https://codepen.io/maxencemaire/pen/VwvyRQB

Consulte https://css-tricks.com/snippets/css/a-guide-to-flexbox/ para obter mais informações sobre o flexbox.

Kathandrax
fonte

h-100classe não funciona corretamente, é melhor usar min-vh-100.

ikonuk

@ikonuk O que exatamente você quer dizer com "não funciona corretamente"? Por favor elabore.

Kathandrax

Como a h-100classe sempre depende da altura dos elementos pai e pode não funcionar corretamente em alguns casos. Como queremos rodapé na parte inferior da viewport, seria uma boa prática usar a altura da viewport.

ikonuk

Novamente, defina 'alguns casos'. Seu argumento sobre a dependência dos pais se aplica da mesma forma min-width. É por isso que a HTMLtag possui height100% no código. O exemplo funciona e não vejo por que não deu o suporte entre navegadores para a heightpropriedade CSS , que é basicamente o que o snippet do Bootstrap traduz.

Kathandrax

Eu não disse que seu exemplo não funciona. Nem todo mundo usa o estilo na HTMLtag. No meu caso, sua solução não funcionou, pois eu não prefiro usar o estilo na HTMLtag. E eu não quero que a bodytag dependa de outro pai, mas da viewport. Você não precisa colocar style="height:100%;"e h-100ao mesmo tempo. Colocar min-vh-100no corpo simplesmente faz o trabalho e menos código.

ikonuk 4/06

0

Parece que a height:100%'cadeia' está sendo quebrada div#main. Tente adicionar height:100%a ele e isso poderá aproximá-lo de seu objetivo.

brains911
fonte

0

Aqui você encontrará a abordagem em HAML ( http://haml.info ) com a barra de navegação na parte superior e o rodapé na parte inferior da página:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

Hannes
fonte

Você poderia elaborar um pouco sua resposta? As respostas somente de código geralmente são desencorajadas.

Qix - MONICA FOI ERRADA EM

1

Ok, o que você quer saber?

Hannes

Não preciso saber disso, mas alguém que venha a este site mais tarde talvez não saiba exatamente por que o código da sua resposta faz o que faz.

Qix - MONICA FOI ERRADA EM

Provavelmente eu deveria excluí-lo. Eu escrevi uma nova introdução. :)

Hannes

0

Mantenha simples.

footer {
  bottom: 0;
  position: absolute;
}

Pode ser necessário também compensar a altura do rodapé adicionando um margin-bottomequivalente à altura do rodapé no body.

obfk
fonte

0

Aqui está um exemplo usando css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

violino

Vencedor
fonte

0

É assim que o bootstrap faz isso:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Basta usar a fonte da página e você poderá ver. Não esqueça <div id="wrap">o topo.

Bren
fonte

0

outra solução possível, apenas usando consultas de mídia

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

GeorgeWL
fonte

Rodando o rodapé para a parte inferior da página, bootstrap do twitter

Respostas:

Você precisa de pelo menos um elemento com um #footer

Solução Bootstrap v4 +

Por que isso funciona

Você precisa de pelo menos um elemento com um `#footer`