Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

The following test site is supposed to let the map extend to the maximum available space and to ensure a minimal height of 300px. This works perfectly in firefox. But in opera and safari on all apple devices (Mac, IPhone, IPad), after resizing the window a few times will create empty areas (screenshot).
Js fiddle

<html>
  <head>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
      html, body {
        margin:0;
        padding:0;
        position:absolute;
        left:0;
        top:0;
      }
      html {
        height:100%;
        width:100%;
      }
      #map {
        min-height:300px;
        width:100%;
        border:1px solid red;
        padding: 5px;
      }
    </style>
    <script>
      var map;

      function init() {
        var layer = new OpenLayers.Layer.OSM("OpenStreetMap", null, {});
        map = new OpenLayers.Map({
          div: "map",
          layers: [layer]
        });
        map.zoomToMaxExtent(layer);
        resize();
      }

      function resize() {
        var div = $('#map');
        div.height(
          div.height() + ($(window).height() - $('body').height())
        );
        map.updateSize();
      }

      window.onresize = resize;
    </script>
  </head>
  <body onload="init();">
    <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den</p>
    <div id="map"></div>
  </body>
</html>

Ps: At the time of writing the OSM map server seems to be down. (Working again)

share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

Drop min-height property from css rule. Apply a minimum limit value on container height attribute.

function resize() {
  var div = $('#map');
  div.height(
    Math.max( div.height() + ($(window).height() - $('body').height()), 300 )
  );
  map.updateSize();
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.