0

I cannot figure out why the black bar on footer doesn't goes on the baseline of the window. I don't want it "fixed" while scrolling. Just on the absolute bottom

html { 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}

body {
    padding-top: 15px; /* 60px to make the container go all the way to the bottom of the topbar */
    background: #f7f7f7 repeat-x url(<%=image_path('background.png')%>) top left;
    font-family: Helvetica, Arial, sans-serif;
    color: #323232;
}

footer{
    margin: 0px;
    padding: 10px;
    background: black;
    color: white;
    position: absolute;
    left:0;
    right: 0;
    bottom: 0;

}

enter image description here

1
  • shouldn't the bottom property and others be 0px instead of 0? Feb 7, 2013 at 20:02

1 Answer 1

1

There's a very solid solution for this common problem that I always use when I want a footer to be 'sticky'.

3
  • I tried but in other pages, if I scroll down I get this: cl.ly/image/2l2I1d0C1i28
    – sparkle
    Feb 7, 2013 at 21:44
  • Then you're doing something wrong ;) Please add you HTML and CSS so we can try to see what's going wrong.
    – Flauwekeul
    Feb 7, 2013 at 21:48
  • RESOLVED! :) It was "position: absolute;" on footer
    – sparkle
    Feb 7, 2013 at 21:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.