floating footer always on the bottom and visible

css-float footer sticky-footer
Piotr Ciszewski picture Piotr Ciszewski · Nov 28, 2012 · Viewed 86.4k times · Source

I have a website like this one: >> website <<. It is built from 2 frames - main and a footer. I was trying to get it working without frames (don't work on mobile phones). Is there any simple CSS or jQuery method to stick the footer on the bottom to be visible always? so the effect is like on the website above? I was trying to use css, but the footer appears only when I scroll down to it. I want the footer to cover the actual content, so it's always for example 50pixels high and is always visible on the bottom of the screen. even if the page is 10000px high. I believe it's something simple, but I got lost somewhere there. Thank you for your help in advance

Answer

Christian picture Christian · Nov 28, 2012

Yes. It's the position: fixed property.

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

Demo: http://jsfiddle.net/ZsnuZ/

Related questions

How do I center floated elements?

I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by …

Read More
How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More
How to float 3 divs side by side using CSS?

I know how to make 2 divs float side by side, simply float one to the left and the other to the right. But how to do this with 3 divs or should I just use tables for this purpose?

Read More