46875

jquery mobile and iphone - white space in the bottom of the page

I have a jquery mobile webpage. It looks good on desktop browsers, and also on android.

But in iphone's safari, I have a weird white space in the bottom of the page. It looks like a problem with the min-height of the .ui-page, because the white space is as height as the title-bar + url-bar of safari.

Any ideas?

EDIT: I found the problem: It was:

html, body { overflow-x: hidden !important; position: relative !important; }

Answer1:

I hope this code fix your problem.

<strong>Example</strong>

// Get height of the document var screen = $(document).height(); // Get height of the header var header = $('[data-role=header]').height(); // Get height of the footer var footer = $('[data-role=footer]').height(); // Simple calculation to get the remaining available height var content = screen - header - footer; // Change the height of the `content` div $('[data-role=content]').css({'height': content });

Answer2:

The problem is with min-height attribute in min.css. change

ui-page { min-height:"400px" }

Hope it works :)

Answer3:

Sorry for posting on an old question, but I recently got stuck with this.

Turned out the problem was caused in some browsers by JS functions people provide for hiding the address bar.

such as

function hideAddressBar(){ if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio) document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px'; setTimeout(window.scrollTo(1,1),0); } window.addEventListener("load",function(){hideAddressBar();}); window.addEventListener("orientationchange",function(){hideAddressBar();});

Recommend

  • OpenOptionsMenu not working with ActionBarSherlock Custom SubMenu
  • How to remove left and right margins from all wrapped rows in flexbox (without nth-child or js)
  • Get the last date of each month in a list of dates in Python
  • insert radio value multiple data codeigniter in database to one row?
  • Universal Image Loader reuse images
  • DIV instruction jumping to random location?
  • saving file generated by TCPDF
  • Diff between two dataframes in pandas
  • Moving Android View and preventing onDraw to be called over and over again
  • xtable package: Skipping some rows in the output
  • What and where is mdimport
  • Does it make sense to call System.gc() and Thread.sleep() when working on Bitmaps?
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Blackberry - Custom EditField Cursor
  • Play WS (2.2.1): post/put large request
  • Handling un-mapped Rest path
  • Body moving without any force applied? (Box2d)
  • Paperclip, set path outside of rails root folder
  • Fetching methods from BroadcastReceiver to update UI
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Get object from AWS S3 as a stream
  • script to move all files from one location to another location
  • Symfony2: How to get request parameter
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • GridView Sorting works once only
  • Circular dependency while pushing http interceptor
  • How to get icons for entities from eclipse?
  • AngularJs get employee from factory
  • WPF Applying a trigger on binding failure
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How to set the response of a form post action to a iframe source?
  • -fvisibility=hidden not passed by compiler for Debug builds
  • Memory offsets in inline assembly
  • Change div Background jquery
  • Android Google Maps API OnLocationChanged only called once
  • How to get Windows thread pool to call class member function?
  • JaxB to read class hierarchy
  • Busy indicator not showing up in wpf window [duplicate]
  • How to Embed XSL into XML