0

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)

0

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();
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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