How do I leave my footer fixed below all page content?

Asked

Viewed 64 times

1

I’m creating a footer (orange color), image below:

inserir a descrição da imagem aqui

The problem is that it hides part of the page content (a green banner, as can be seen, and on other pages, news and information)

How to leave it underneath all the content so it doesn’t hide anything on the screen.

<div class="rede-social-rodape"></div>

div.rede-social-rodape{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 150px;
    background-color: #E9CA2B;
    border-top: 2px solid #b79900;
}
css

  • Guy with only this piece of code can’t help you. But basically put in the last div before Footer a padding bottom that’s the same height as the footer. If you do, let me know.

  • @hugocsl how much code you need? I can post.

  • At least page HTML and CSS, if you have a script you don’t need. html and css only, something to simulate your problem

  • @hugocsl but what you do not hide the content is give a padding bottom?

  • 1

    it has to be in the last container before the footer, it has to have a padding-bottom with the same height of the footer, that should solve. Or else you already put this padding-bottom of the footer height straight on the body, this should solve also

  • @hugocsl resolved. Thank you very much! If you want to formulate a reply.

  • Thanks Gladison posted the comment as reply vlw []s

Show 2 more comments

1 answer

1


Gladison what happens is that an element with position:fixed ends up leaving the content stream of the document, no longer occupying space. Because of this the content that is above it ends up "collapsando" and occupying the space that would be the fixed element.

In your case one of the techniques to solve this is to put in the element that precedes the footer one padding-bottom with the same height of footer. That one padding will prevent one content from being on top of the other, because now the space of footer will be occupied by the padding.

Here’s some documentation on position that can help you understand the concept https://developer.mozilla.org/en-US/docs/Web/CSS/position

  • 1

    Perfect! Thank you very much.

  • @Gladison tmj young!

Browser other questions tagged css

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