Question

无法在弹性框列布局中正确调整openlayers 3地图的大小？

我有一个非常简单的Flexbox列“容器”，有两行，似乎openlayers大小更新总是将它的高度计算为整页高度，导致出现垂直滚动条。

<style>
  .container {
     display: flex;
     flex-direction: column;
  }

  .row {
     flex: 1 1 auto;
  }

  #map {
     flex: 0 0 none;
  }
</style>

</head>

<body ng-controller="AppCtrl">
  <div class="container">
    <div class="row">NAV BAR</div>
    <div id="map" class="map"></div>
  </div>
 ...

可在此处找到一个示例http://codepen.io/cmadsen/full/zGpYjQ/

Answer 1

试试这个：

html, body {
  margin: 0;     /* Remove margins */
  height: 100%;  /* Fill the window */
}
.container {
  height: 100%;  /* Fill the window */
  display: flex; /* Magic begins */
  flex-direction: column;
}
#map {
  min-height: 0; /* Let the content overflow */
  flex: 1;       /* Fill the available space */
}

＆＃13;

var app = angular.module('StarterApp', []);
app.controller('AppCtrl', ['$scope', function($scope) {
  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.TileJSON({
      url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
    })
  });
  var map = new ol.Map({
    layers: [rasterLayer],
    target: document.getElementById('map'),
    view: new ol.View({
      center: ol.proj.transform([11, 55.8403], 'EPSG:4326', 'EPSG:3857'),
      zoom: 6
    }),
    controls: ol.control.defaults().extend([
      new ol.control.ScaleLine()
    ])
  });
}]);

＆＃13;

@import 'https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css';
html, body {
  margin: 0;
  height: 100%;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#map {
  min-height: 0;
  flex: 1;
}

＆＃13;

<body ng-controller="AppCtrl" ng-app="StarterApp">
  <div class="container">
    <div class="row">NAV BAR</div>
    <div id="map" class="map"></div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol-debug.js"></script>
</body>

＆＃13;

Openlayers 3在flexbox列布局中调整大小？

1 个答案: