0

Hi I want a footer to always stay at the bottom of the page. If I use:

#footer {
   position:fixed;
   bottom:0
}

I get a footer that will overlap my content div (if it gets to long). So is there any way to get to footer at the bottom of the page even if I don't have enough content in the div above? Like have a div that expands if the content div is to short? I know that this question must have been asked before but I can't find a good answer.

Thanks!

edit:

I probably was not clear enough,

right now my website looks like this:

enter image description here

with whitespace under the footer, which I don't want.

I want it to be like this:

enter image description here

the footer at the bottom, but if I use the code that you guys provided then I get a problem when I have more content.

So when I have more content I want my footer to act like in the first pic or like this:

enter image description here

So that my content will push down the footer.

Thanks! :)

Verendus
  • 1,026
  • 1
  • 13
  • 26

3 Answers3

0

use width:100% / height :100% as a style.

numX
  • 830
  • 7
  • 24
0

make your layout like this:

<html>
<head><title>Your Title</title></head>
<body>
REST OF BODY
<footer>HERE THE FOOTER</footer>
</body>
</html>

Now, the footer will be at the bottom of the page

And css:

footer {
            width: 100%;
            bottom: 0;
            position: fixed;
        }
STheFox
  • 1,478
  • 4
  • 18
  • 24
  • Yhea, sure it will be at the bottom. BUT if i put more content in the body so that the page needs scrolling then the footer will be ontop of the content:( – Verendus Apr 04 '14 at 14:47
0

Check this Demo jsFiddle

CSS

div#footer{
    width:100%;
    height :100%
    position:fixed;
    color:#fff;
    text-align:center;
    background-color:#333;
    padding:7px 0 7px 0;
    font-size:16px;
    border-top:2px solid #CC0000;
    font-family:Courier;
    margin:-5px auto -2px auto;
    z-index:9999;   
    bottom:0;
}
div#footer a{
    color:#ef3939;
    text-decoration:underline;
}

Hope this help you!

Jaykumar Patel
  • 26,836
  • 12
  • 74
  • 76
  • This will just make it stick at the bottom of the view, and not the page. So if the page is longer then what my browser can display in a view the footer will be above the content. – Verendus Apr 06 '14 at 15:48
  • so you want to set position fixed on bottom of view.? – Jaykumar Patel Apr 06 '14 at 15:58