Response title
This is preview!
Pages with header and/or footers and the min-height page calculation
in jQuery Mobile
•
11 years ago
I have a simple page in the form of <header/><content/><footer/>. I've noticed that when the page loads, there are scroll bars on Chrome on desktop, and the page is scrollable on iOS, even though the content section has a single line of text.
I dug into it, and in the resetActivePageHeight() function, it is setting the min-height to 480px (this is fine). But the problem comes into play if you have a header & footer on the page, because the content area will have padding applied to it to compensate for the header/footer real estate.
If you size your window to be 480px tall and load the page and call $("." + $.mobile.activePageClass).height(), you'll get 480px. The problem is 480px is the TOTAL height of the screen (including the header/footer padding). So when the min-height CSS value is placed on the active page, it is setting 480px which in CSS world then is expanded to 480px + whatever paddings exist for header/footer; thus causing the page to actually have a height of > 480px.
So my workaround is to update the resetActivePageHeight() function to look like:
//simply set the active page's minimum height to screen height, depending on orientation
function resetActivePageHeight() {
// Get the full screen's height.
var screenHeight = getScreenHeight();
// If a page has a header/footer, the active page will have padding applied to it. If we set the
// min-height to that of the screen height, the padding will be double counted, thus causing unnecessary
// scrolling on some devices.
var activePage = $("." + $.mobile.activePageClass);
if (activePage.length > 0) {
var topPadding = activePage.css("padding-top");
var bottomPadding = activePage.css("padding-bottom");
screenHeight = screenHeight - topPadding.replace("px", "") - bottomPadding.replace("px", "");
}
// Set min-height.
activePage.css("min-height", screenHeight);
}
Has anyone else run into this or see problems with my approach? Is this a bug which should be reported? Note, I am using the latest nightly 1.1 code base.
Thanks!