A sticky footer will always be at the bottom of the page **regardless** of how much content is in the ‘content’ area but will be off the page if the content is longer that the viewport height.

But if the content is longer than the page you want a scroll which means that the footer would always be there…that’s not a sticky footer…that’s a page with a set height with a content div set to scroll overflow…isn’t it?

i want like a page static. so the only div that will scroll is the content. the only page that will have content will be the content. and because i want the footer sticky, i mean in diferent resolutions, i want the header on thwe top, the side bar on the right, and the footer on the bottom, so when the content on content div is more, the content div scroll.. is this possibile to do? should i use fixed position for footer? so it will be always at bottom of the browser and not at the bottom of the page?

The problem is that you won’t necessarily know the height of the viewport.

Certainly you can fix the position of the footer with fixed positioning but unless you know the height of the viewport you can’t set a height of the content div to ensure that it overflows as you want.

so and if i put the scroll on the page, i will just have to put the sticky footer, and then the page will scroll until no content, right? problem is that i cant put the content and the sidebar 100%, so when there is no conent, the content and sidebar(white part) still go down until the bottom

i can give you the css and html if you want to. so i will follow your advice, and put all the page with scroll, but still 100% content and sidebar. and my content will have list’s, that will be taked from a database. so i think the best way to dont put the page to big in height, i can make like pages. i mean: 10 items per page, then go to page 2. its the ebst way, right?

I really need your help. So now i dont have the scroll on content. I will follow your advice, and put the scroll on all page. I have a sticky footer, the is outside of the wrapp div. And inside of the wrapp, i have the site content(the white part) and then inside of it i have content and sidebar. But now i cant put the site_content (content and sidebar) at 100% :/

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.