Reputation: 3

Can't get the footer to stay at the bottom of the page

I can't manage the footer of my page to stay at the bottom when I scroll down, I have it on "position: absolute;" and "bottom: 0" but it doesn't work, when I scroll down it goes over the content of the page. I don't want to use position: fixed because I don't want the footer get over my content. Here's my Jsfiddle: Jsfiddle

Footer:

footer {
    position: absolute;
    -moz-box-shadow: inset 0px 4px 20px #111;
    -webkit-box-shadow: inset 0px 4px 20px #111;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 50px;
    background-color: #333;
}

Body:

body {
    background-image: url(../img/pictures/background3.png);
    background-attachment: fixed;
    margin: 0px;
    padding: 0px;
}

Upvotes: 0

Answers (5)

Henrik Ammer

Reputation: 1899

Use a "Sticky footer", http://bavotasan.com/2010/creating-a-sticky-footer-for-your-site/. Like the following example (extra <p> tags to get a scroll on the window):

HTML

<div class="wrap">
  <div class="content">
    <p>Here goes the content</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
  </div>
</div>
<div class="footer">
  Here comes the footer, always at the bottom of the page
</div>

CSS

html,body{ height:100% }
.wrap{
  height: auto;
  min-height: 100%;
  width: 100%;
}
.content{
  height: 100%;
  padding-bottom: 50px;
}
.footer{
  margin-top: -50px;
  height: 50px;
}

Upvotes: 1

N Alex

Reputation: 1014

You should use position: relative and give it a top margin of 167px (your header height which is fixed).

footer {
    position: relative;
    -moz-box-shadow: inset 0px 4px 20px #111;
    -webkit-box-shadow: inset 0px 4px 20px #111;
    margin-top: 167px;
    text-align: center;
    width: 100%;
    height: 50px;
    background-color: #333;
}

Upvotes: 0

Lauren

Reputation: 1536

This is one method of getting your footer to stay at the bottom of the page, you set a space at the bottom of the body, relative to the height of your footer. This way it won't hover over your content, or be in the centre of the page.

body {
    margin: 0 0 50px
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #333;
}

Upvotes: 2