我开始了一个简单的 jQuery Mobile 页面，其中包含一个标题和一个内容 div。 content div 应该作为 openlayers 的 map 容器。 map 应填满整个屏幕，标题栏除外。
用 100% 的宽度/高度调整内容 div 的大小不起作用(没有显示任何内容)，所以我正在寻找一种 CSS 方法来调整 div 的像素大小或相对大小的解决方法。
我特别想知道:
- 如何考虑屏幕方向的变化(横向/纵向)？
- 如何使我的布局“高度 flex ”，即抵抗浏览器地址栏的切换？
到目前为止，这是我的标记:
<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 监听窗口“调整大小”事件并自动调用 map.updateSize()。此处无事可做。
在我的例子中，没有标题，下面的代码有效:
<div data-role="page" id="map">
<div id="olmap"></div>
</div>
#olmap, #map {
height: 100%;
width: 100%;
}
关于android - 如何调整内容 div 的大小以覆盖 jQuery Mobile 中的整个内容区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4724221/