Footer at the end of the document

Asked

Viewed 46,057 times

3

I am trying to leave the footer at the end of the document, but it is at the end of the page I am viewing, thus hindering the usability of the system...

Follow the footer:

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

the class I’m using to fix...

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

and the example of my problem where the footer appears on other components of the screen. My intention is to leave it at the bottom of the page when scrolling the scroll bar to the end, then it appears at the end.

inserir a descrição da imagem aqui

css footer style

  • Puts a left: 0;... see if it works

  • It did not solve, but if I change from Fixed to relative it goes to the end, but if it is a page with smaller content, it goes up to the middle of the page for example, and does not get fixed at the end

  • 1

    leaves the footer with the body Parent, without any other ancestor. Takes it from inside .body-content

  • Position it above the div?

  • https://jsfiddle.net/txa1dh3a/13/

  • This example positions in Footer, but if you have more content on the page it is overlaid. http://jsfiddle.net/tifabiosouza/nf2y2vv9/

  • It does not overlap. The footer is fixed as you want: http://jsfiddle.net/nf2y2v9/1/

Show 2 more comments

3 answers

6


EXAMPLE WITH FOOTER IN ABSOLUTE POSITION: 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>

EXAMPLE WITH FIXED FOOTER

Well, in this case, the whole problem is CSS and HTML.

I prepared this Jsfiddle here: https://jsfiddle.net/txa1dh3a/13/

But I’ll put the code:

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>

  • it works if the content is smaller than the screen, then it is fixed at the bottom of the screen, but if the content exceeds, the footer is on top of the content at the bottom of the screen, but not at the bottom of the page.

  • So you have to give a minimum height to div.body-content. And don’t leave the footboard fixed.

  • How would that be ?

  • Take a look now at the other example

  • The method EXAMPLE WITH FOOTER IN ABSOLUTE POSITION is what fits most with my problem, but I didn’t understand where the id="footer" that was used in the footer

  • I just gave an id to the footer tag, that’s all. I can assign ids to any tag as long as it’s unique on the page

  • ah yes, I understood, I thought it had some other purpose. Your code worked, thank you very much

Show 2 more comments

0

The method you need is well known as "Sticky Footer". Even, if you use a framework like Bootstrap, you can do it with only one organization in formatting and one class.

Maybe this is what you want:

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;
}

Or if you want to test the code, I saved https://jsfiddle.net/dgp4u1p1/

  • thanks for the force, but when the content of the page is larger than the screen, the content is on the footer, in my case, the footer was on the content (Just reversed who stands in front). What I need is for the footer to be at the bottom of the content when the content is larger than the screen, and when it is smaller it is fixed at the bottom of the page.

-2

To make a footer responsive, where regardless of having insufficient content on the screen like having a content larger than the screen size overflow, I did so:

<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>

Browser other questions tagged css footer style

You are not signed in. Login or sign up in order to post.