How to size a content div to cover the entire content area in jQuery Mobile
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 worka开发者_StackOverflowround.
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>
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%;
}
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)
加载中,请稍侯......
精彩评论