Question

我创建了一个带有标题和内容div的简单jQuery Mobile Page。内容div应该作为openlayers的地图容器。除了标题栏之外，地图应该填满整个屏幕。

调整宽度/高度为100％的内容div的大小不起作用（没有显示任何内容），所以我正在寻找一种CSS方法来对div进行像素大小或相对大小的解决方法。

特别是我想知道：

如何解释屏幕方向更改（横向/纵向）？
如何使我的布局“高度弹性”，即抵制浏览器地址栏的切换？

到目前为止，这是我的标记：

<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>

Answer 1

您是否尝试过为内容div设置宽度设置并且它包含div，我想在您的情况下会是页面？我在移动浏览器上的经验是，设置高度和宽度会导致手机旋转时出现问题。这仅限于授权的iPhone。

Answer 2

我还没有测试过，但看看是否有效：

按照此处所述设置全屏模式：http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

并将#mapcontainer的宽度和高度设置为100％（并在测试时将一些内容放入其中）

Answer 3

OpenLayers侦听窗口'resize'事件并自动调用map.updateSize()。这里无事可做。

在我的情况下，没有标题，以下代码有效：

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

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

如何调整内容div的大小以覆盖jQuery Mobile中的整个内容区域

3 个答案: