css - 流体开放层 - 响应式设计

我试图让我的 openlayers map 适合浏览器的大小，并在每次浏览器调整大小时调整大小。所以我可以进行响应式设计。

我的代码结构是这样的

<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript'>


var map;
var options = {   
  controls: [],
  maxResolution: "auto",
  projection: "EPSG:900913",
  units: 'm'
}

function init(){
 map = new OpenLayers.Map('map_element', options);
 //set layers, styles for vectors layers, set and activate click events etc.
}

</script>


<body onload='init();'>

<div id='map_element' style=" width:800px; height:400px ; z-index:1; position: relative;text-align:center;"> </div>

根据 this我尝试使用

//if browser loads 
//this is inside init() because = body.onload > init > resize map
map = new OpenLayers.Map('map_element', options);
map.updateSize();

//if browser resized
    window.onresize = function()
    {map.updateSize();}

但不起作用

此外，如果我在 map_element div 中设置 style="width:100%;， map 将从页面中消失。

发生了什么事？我错过了什么？

提前致谢

最佳答案

看看这个例子: http://openlayers.org/dev/examples/fullScreen.html

这是响应式的，CSS 通过将宽度和高度设置为 100% 来完成大部分工作。

关于css - 流体开放层 - 响应式设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20061241/