How do I keep my footer at the bottom of the page?

Question

I am having some trouble, my footer won't stay at the bottom of the page, it "sticks" to the bottom of the screen when I scroll.

It ends up covering up parts of the page as I scroll and gets quite annoying.

Here is my HTML:

    <div id="footer" style="text-align: center">
    <p>Designed by ddrossi93. &copy;2015. All Rights Reserved.</p>
    </div> 

And my CSS:

#footer {
border-top:1px solid;
text-align: center;
height: 60px;
background: #789;
font-weight: bold;
bottom: 0;
left: 0;
position: fixed;
width:100%;
}

If you need more info, let me know and I can post more of my code.

Answer 1

 position: fixed;

Means your footer will hover at the bottom of the page, the same way a navbar will on many websites. If you want your footer to stay at the bottom of the page, you need to change position to something else like absolute or relative . Here's a link to more info. http://www.w3schools.com/css/css_positioning.asp

Answer 2

You should change the position:fixed to position:relative ,not position:absolute . fixed makes your element stay at a specified position relative to the screen's viewport and will not move when scrolled.If you change to absolute ,you have to add position:relative to the containing block or the ancestor,so it will not sit in the middle of your page.Change to relative is the right way.

As to "some white space left at the bottom"? Try to add the following code in your style: body {margin:0;}

Answer 3

Try changing the position in the CSS to absolute.

#footer {
border-top:1px solid;
text-align: center;
height: 60px;
background: #789;
font-weight: bold;
bottom: 0;
left: 0;
position: absolute;
width:100%;
}

Answer 4

Another solution is to set the margin and padding of the body element to 0;

body {
    padding: 0;
    margin: 0;
}