CODEWITHSUNDEEP
htmlcss
ddrossi93
ddrossi93

Reputation: 385

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

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.

Upvotes: 0

Views: 70

Answers (4)

XfLoops
XfLoops

Reputation: 26

You should change the position:fixedtoposition:relative,not position:absolute. fixedmakes 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;}

Upvotes: 1

Chris Hore
Chris Hore

Reputation: 127

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

body {
    padding: 0;
    margin: 0;
}

Upvotes: 0

user4846532
user4846532

Reputation:

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

Upvotes: 0

Austin
Austin

Reputation: 151

 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

Upvotes: 1

Related Questions