Join GitHub today
GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
Incorrect min-height of page with fixed header and footer #3663
When setting both the header and footer to data-position="fixed", without enough data to fill the content in between, the min-height calculated for the page is too big. It seems like jqm is not taking into account that the fixed headers take up some space, i.e. the padding of the <div data-role="page">.
An example can be found here: http://jsbin.com/eyufam/2
As far as I can tell this issue is present in Chrome 17.0.963.56, Firefox 10.0.2 and iOS 5 on iPhone.
The problem with the example is that there is a lot of content, I should have made one with just a few buttons or so, so it would not fill up the entire page. To see the effects now, one needs to enlarge the page. For me this was more or less half the screen or bigger.
If you do so, the result would be something like in this screenshot. Here you see a scrollbar that makes no sense, since the content is not even big enough to fill the space between the header and the footer.
p.s. I'm on Windows 7 if that makes any difference..
EDIT: see this version if you want to see the effect on your phone
This comment has been minimized.
This comment has been minimized.Show comment Hide comment
I get this result in every browser I try; Safari 5.1.2, Firefox 10.0.2, Internet Explorer 9.0.8112, Chrome 17.0.963.56 m & Safari on iOS 5 on iPhone 4S. All show scrollbars in http://jsbin.com/eyufam/7 where there shouldn't be any.
To me this does not seem like a Windows 7 specific thing. It seems more like the page height calculation does not take into account the set padding for the page. This should be subtracted from the min-height in the fixed header/footer situation.
At least to me this seems to be the case as the padding is needed so the content of the page clears the header and/or footer, but still the min-height of the page is set to be the window height. When I edit the min-height property of the page manually in Chrome's Developer Tools to be the set min-height minus both top and bottom padding than everything seems to be fine!
Okay yes I'm seeing that now. I'll take a look. Sounds like we need to subtract the page's top and bottom padding from the height.
On Feb 29, 2012, at 6:49 PM, Henkeh wrote: