4

estou tentando deixar o footer no final do documento, mas ele fica no final da página que estou visualizando, atrapalhando assim a usabilidade do sistema...

Segue o footer:

<div class="container body-content">
    @RenderBody()
    <footer class="fixarRodape">
        <hr />
        <p>&copy; @DateTime.Now.Year</p>
    </footer>
</div>

a classe que eu estou utilizando para fixar...

style>
    .fixarRodape {
        bottom: 0;
        position: fixed;
        width: 90%;
        text-align: center;
    }
</style>

e o exemplo do meu problema onde aparece o footer sobre outros componentes da tela. Minha intenção é deixa-lo no final da página, quando rolar a barra de rolagem até o final, então ele aparecesse no final.

inserir a descrição da imagem aqui

7
  • Coloca um left: 0;... vê se dá certo Commented 13/11/2016 às 1:52
  • Não resolveu, mas se eu mudo de fixed para relative ele vai para o final, porém se for uma página com conteúdo menor, ele sobe para o meio da página por exemplo, e não fica fixo no final Commented 13/11/2016 às 2:00
  • 1
    deixa o footer com o parent body, sem nenhum outro ancestral. Tira ele de dentro de .body-content Commented 13/11/2016 às 2:05
  • Posicioná-lo acima da div? Commented 13/11/2016 às 2:11
  • jsfiddle.net/txa1dh3a/13 Commented 13/11/2016 às 2:30

4 Respostas 4

6

EXEMPLO COM RODAPÉ EM POSIÇÃO ABSOLUTA: JSFiddle

html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper{
min-height: 100%;
position: relative;
}
div.body-content{
  /** Altura do rodapé tem que ser igual a isso aqui e vice-versa **/
padding-bottom: 100px;
}
footer{
background: #ffab62;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
<div id="wrapper">
  <div class="container body-content">
    <p>
      Conteúdo do corpo do documento!
    </p>
    <p>
      Conteúdo do corpo do documento!
    </p>
    <p>
      Conteúdo do corpo do documento!
    </p>
    <p>
      Conteúdo do corpo do documento!
    </p>
    <p>
      Conteúdo do corpo do documento!
    </p>
    <p>
      Conteúdo do corpo do documento!
    </p>
    <p>
      Conteúdo do corpo do documento!
    </p>
    <p>
      Conteúdo do corpo do documento!
    </p>
  </div>
  <footer id="rodape">
    <p>&copy; Tudo o que quiser colocar aqui</p>
  </footer>
</div>

EXEMPLO COM O RODAPÉ FIXO

Bem, nesse caso, o problema é todo do CSS e do HTML.

Eu preparei esse JSFiddle aqui: https://jsfiddle.net/txa1dh3a/13/

Mas vou colocar o código:

html, * {
  /** Não importa. Reseta os estilos **/
  margin: 0;
  padding: 0;
}
body{
  /** Não importa **/
  font-family: 'calibri light', calibri, arial, sans-serif;
}
div.body-content{
  /** Essa margem vai evitar que o conteudo fique por baixo do rodapé **/
  margin-bottom: 40px;
}

footer.fixar-rodape{
  border-top: 1px solid #333;
  bottom: 0;
  left: 0;
  height: 40px;
  position: fixed;
  width: 100%;
}
<div class="container body-content">
    Conteúdo do corpo do documento!
</div>
<footer class="fixar-rodape">
    <p>&copy; Tudo o que quiser colocar aqui</p>
</footer>

7
  • 1
    ele funciona se o conteúdo for menor que a tela, ai ele fica fixo no final da tela, porém se o conteúdo ultrapassar, o footer fica em cima do conteúdo no final da tela, mas não no final da página. Commented 13/11/2016 às 2:43
  • Então você tem que dar uma altura mínima a div.body-content. E não deixar o rodapé fixo. Commented 13/11/2016 às 2:47
  • Como seria isso ? Commented 13/11/2016 às 2:49
  • Dá uma olhada agora no outro exemplo Commented 13/11/2016 às 3:03
  • O método EXEMPLO COM RODAPÉ EM POSIÇÃO ABSOLUTA é o que mais se encaixa com meu problema, porém eu não entendi de onde o id="rodape" que foi usado no footer Commented 13/11/2016 às 10:00
0

O método que você precisa é bastante conhecido como "Sticky Footer". Inclusive, se você utiliza um framework como o Bootstrap, consegue fazê-lo com apenas uma organização na formatação e uma classe.

Talvez seja isto que você queira:

HTML:

<div class="container body-content">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, mollitia eaque dicta eum! Alias quos soluta dicta! Eos rerum non explicabo odio corporis eligendi, nostrum totam ex atque sunt!
  </p>
</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.body-content {
  min-height: 100%;
  /* igual a altura do rodapé */
  margin-bottom: -60px; 
}
.body-content:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 60px; 
}
.site-footer {
  background: gray;
}

Ou se quiser testar o código, salvei no https://jsfiddle.net/dgp4u1p1/

1
  • obrigado pela força, porém quando o conteúdo da página é maior que a tela, o conteúdo fica sobre o rodapé, no meu caso, o rodapé estava sobre o conteúdo(Apenas inverteu quem fica na frente). O que eu preciso é que o rodapé fique no final do conteúdo quando o conteúdo for maior que a tela, e quando for menor que fique fixo no rodapé da página. Commented 13/11/2016 às 10:05
0

Uma das maneiras que você pode utilizar é criar uma função no js.

exemplo, tenho um arquivo js chamado script_tela.js, nele tenho a função dimensaoTela.

function dimensaoTela(){
    var heightTela = window.innerHeight;
    var widthTela = window.innerWidth;

    document.getElementById('pag_processos').style.minHeight = heightTela+'px';
}

posso chamar esse script no meu html

 <script src="script_processo.js"></script>

e redimensionar a tela através do evento onload

<body id="pag_processos" onload="dimensaoTela()">
</body>

Assim vc pode passar a altura e/ou largura da tela do seu js para o seu css, e obrigando o footer a ficar abaixo dessas dimensões de tela, vc ainda pode ajustar esses valores diminuindo a altura ou largura no js.

bem, continuando, agira vamos para o footer

<footer>Lorem ipsum dolor</footer>

no css fica assim

footer{
    position: absolute;
    bottom: 0;
    }

Sendo assim, o body irá conter todo o tamanho da sua página, e o footer será adicionado ao final dela. e fixado.

Com certeza você já resolveu esse problema, fazem vários anos, más espero ajudar alguém :)

-2

Para fazer um footer responsivo, onde independente de ter conteudo insuficiente na tela como ter um conteudo maior que o tamanho da tela com overflow, eu fiz assim:

<html>
  <head>
    <style>
      body {min-height: 100%}
      footer {position: absolute; height: 2.5rem; width: 100%; bottom: 0}
      .position-relative {position: relative}
    </style>
  </head>
  <body>
    <footer>
      <p>TESTE</p>
    </footer>
    <script>
      if (document.querySelector('body').offsetHeight > window.innerHeight)
        document.querySelector('footer').classList.add('footer-relative');
    </script>
  </body>
 </html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .