How to size a content div to cover the entire content area in jQuery Mobile

StackOverflow https://stackoverflow.com/questions/4724221

Question

I started a simple jQuery Mobile Page with a header and a content div. The content div should serve as a map container for openlayers. The map should fill up the entire screen, except for the header bar.

Sizing the content div with a width/height of 100% didn't work (nothing was displayed), so I'm looking for a CSS approach to pixel-size the div or a relative-size workaround.

Especially I like to know:

  • How can I account for screen orientation changes (landscape/portrait)?
  • How can I make my layout "height-elastic", i.e. resistant to the toggling of the browser's address bar?

Here is my markup so far:

<body> 

<div data-role="page">

<div data-role="header">
    <h1>My Map</h1>
</div>

<div id="mapcontainer"  data-role="content">
     <!-- OpenLayers Map goes here -->          
</div>

</div>

</body>
Was it helpful?

Solution

OpenLayers listens for the window 'resize' event and automatically calls map.updateSize(). Nothing to do here.

In my case, without header, the following code works:

<div data-role="page" id="map">
     <div id="olmap"></div>
</div>

#olmap, #map {
    height: 100%;
    width: 100%;
}

OTHER TIPS

Have you tried just setting the width setting for both the content div and it's containing div, which I guess in your case would be page? My experience on mobile browsers is that setting both height and width will cause problems when the phone is rotated. That's limited to the iPhone, granted.

I didn't test it yet, but see if this works:

set fulscreen mode as described here: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

and set #mapcontainer width and height to 100% (and put some content in it when testing)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top