Fixed footer issue on WP8 Emulator - webview

Question

I have used a fixed footer in one my HTML5 web-app. It works fine on IE10 phone browser, but when I try it out on WP8 Emulator using web-view
mainBrowser.Navigate(new URi("http://jqtouch.rediffmailpro.com/iScroll/win8Example1.html",URiKind.Absolute));
It leaves a gap at the bottom.
I read it somewhere, and edited the meta tag to include the height.
<meta name="viewport" content="width=device-width, height=541 initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
The gap is gone. But, I don't think this will a good idea because on orientation change the footer is lost, as height remains 541. I don't want to hard-code the height anywhere, since multiple devices might have different height.
It seems the view-port height is not correctly set for css. I am using bottom:0; position:absolute; to fix the footer. I have tried position:fixed too.
Here is the reference link: WP8 Scroll Demo
Please help.

Answer 1

Use iscroll4 and use few media queries in css:
#media screen and (orientation: portrait) {
#-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
#media screen and (orientation: landscape) {
#-ms-viewport {
width: 480px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
This works fine on Windows Mobile 8 Phones. Here is a demo: http://jqtouch.rediffmailpro.com/iScroll/win8Example.html