how to preserve this div in the bottom of the site?

Question

Hi everyone, I have a big problem in my website (based on Joomla and a free template). When I go to this page: http://bit.ly/2mv4pC I should set the margin of { p.stickynote } to { margin-bottom:300px; } in order to fix the problem of my .

If you just try to play with the { margin-bottom:300px; }, so you will see the behavior of this , deleting this margin will make this div appear in the center of my page.

I've added those properties {bottom:0px;}{position:fixed;} to { div style="bottom: 0px;" id="footer-cover" } but the background "Black banner in the bottom" still the same.

Is there any suggestion to make it fixed in the bottom of the site?

Answer 1

I don't think I quite understand your question, but I'll give it a guess anyway. I think you want your "black banner" to be on the bottom of the browser viewer not the page itself, like the chat-bar-thingy on facebook.

So to do that you do this:

<style>
  #header{}
  #content{margin-bottom:100px} /*to make room for the footer*/
  #footer{height:100px; position:fixed; bottom:0}
</style>

<div id="header" />
<div id="content" />
<div id="footer" />

Answer 2

The issue is that without the margin on the bottom, the page height is shorter then the window bounds, thus your footer div ends and the body of the page bleeds through.

What's the intended effect you want to achieve? Do you want the footer to overlay content and always be visible? Or do you want the footer to just always be at the bottom of the page?

For the first:

#footer-cover {
  position: fixed;
  background-color: #000;
  bottom: 0px;
}

body {
  background-color: #F5F5F5;
}

For the second:

• You want a sticky footer technique, similar to this (Thanks for the better link ZJR), I can't remember all the details of it but has to do with setting a negative margin. It's a little hackey but it works alright.

---

Hopefully this is close to what you're trying to achieve.