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

【问题标题】：How to size a content div to cover the entire content area in jQuery Mobile如何调整内容 div 的大小以覆盖 jQuery Mobile 中的整个内容区域
【发布时间】：2011-01-18 12:48:54
【问题描述】：

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

调整内容 div 的宽度/高度为 100% 不起作用（没有显示任何内容），因此我正在寻找一种 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>

【问题讨论】：

标签： android css google-chrome openlayers jquery-mobile

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：