Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How can I get this footer to finally do what I want? Would love some advice

How can I get this footer to finally do what I want? Would love some advice

Problem

When I do something like this for the Footer css

footer {
position: fixed;
top:800px;
left:0;
width:100%;
height:80px;
}

When I resize the browser window from the Bottom upward, of course, the footer does not move and does not overlap my main content which is great however, when viewing the site at different screen sizes, the footer being a fixed footer of course is at the bottom for some screen sizes then larger sizes it isn't at the bottom of course because it's fixed. So ultimately what would I would love to have is a footer like this:

footer {
position: fixed;
top:90%;
left:0;
width:100%;
height:80px;
}

Which creates a footer that stays at the bottom of the page regardless of resizing yet it can overlap content. I want to have a fixed footer that will always stay at the bottom yet never overlap content.

I could use media queries for popular sizes but of course at some sizes it won't work out. Can anyone help me out?

Problem courtesy of: user974725

Solution

footer {
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  height:80px;
}

Then give your content a bottom padding of at least 80px. Why are you using top anyhow?

Solution courtesy of: Kai Qing

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How can I get this footer to finally do what I want? Would love some advice

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×