CODEWITHSUNDEEP
csspositioningfootertabletfixed
Stefan Hagen
Stefan Hagen

Reputation: 658

Position: fixed on a tablet?

I'm working on my portfolio website at the moment. I'm trying to optimize it for as much hardware as I can, so I've looked at my site on a tablet. Bummer. I have a footer that needs to 'stick' to the bottom of the window, which I successfully created with the following css:

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

However, on a tablet it is not sticking to the window bottom, but hovering under the rest of the content (that's where I put it in my HTML). That means if a page doesn't have much content on it, the footer is placed on the middle of the page. I've googled around for a while, and found that some tablets don't support fixed positioning.

Does anybody know of a workaround to this problem?

Upvotes: 1

Views: 4872

Answers (2)

Oneezy
Oneezy

Reputation: 5013

The fine people at the Filament group created a plugin for this, check it out here: Fixed-Fixed

They've also created many more great plugins for "progressive enhancement", check it out here: SouthStreet

Keep up with them at they're website here: Filamentgroup

Upvotes: 0

Stefan Hagen
Stefan Hagen

Reputation: 658

All right, I'll answer my own question to sum things up. Thanks to Darek Rossman, I've found some interesting links. The main point is that position fixed is gradually gaining more support on tablets, so it's a matter of time before this problem isn't a problem anymore. The workaround that seems to work for me is using the javascript solution Darek Rossman mentioned in his first comment. However javascript is still not working flawless on some tablets. Until better times arrive, I'll use a different stylesheet for tablets (using media queries). Special thanks to Darek Rossman who posted the interesting stuff!

Upvotes: 1

Related Questions