无法让 openlayers 3 map 在 flexbox 列布局中正确调整大小？
我有一个非常简单的 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/
最佳答案
试试这个:
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 */
}
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()
])
});
}]);@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;
}<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>关于css - Openlayers 3 在 flexbox 列布局中调整大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31068482/