1

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?

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
Stefan Hagen
  • 658
  • 3
  • 11
  • 25
  • 1
    iOS5 actually does support position fixed now...and Android has supported it for awhile...the only true workaround is a javascript solution to calculate the position of the scroll offset and move the footer accordingly. – Darek Rossman Dec 05 '11 at 18:18
  • You might also try this: http://stackoverflow.com/questions/4889601/css-position-fixed-into-ipad-iphone – Darek Rossman Dec 05 '11 at 18:23
  • all right thanx guys, guess i'll have to wait till position:fixed; is supported on every tablet. I'll write a tablet media query for now! – Stefan Hagen Dec 05 '11 at 19:40

2 Answers2

1

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!

Stefan Hagen
  • 658
  • 3
  • 11
  • 25
0

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

Oneezy
  • 4,881
  • 7
  • 44
  • 73