Как разместить карту на весь экран?

Question

Моя карта Openlayer не хочет автоматически помещаться на весь экран. Любые настройки не помогают справиться с этим. С чем может быть проблема? Заранее спасибо

ol-map. js

import React, {Component} from "react";
import "./map-style.css";

import {
  Map,
  layer,
  Layers
} from "react-openlayers";

class OLMap extends Component {
  render() {
    return (
      <div className="Map">
        <Map view={{
          center: [50.62202375, 26.24943584],
          zoom: 2,
          maxZoom: 11,
          minZoom: 1
        }}>
          <Layers>
            <layer.Tile />
          </Layers>
        </Map>
      </div>
    );
  }
}

export default OLMap;

стиль карты. css

.Map {
  height: 100%;
  width: 100%;
  right: 0;
  left: 0;
}

Answer 1

На самом деле основная проблема связана с вашими CSS стилями, вы должны изменить свой map-style.css контент на следующие коды:

html,
body {
  height: 100%;
}

#root { /* the root element of ReactJS injection */
  display: flex;
  height: 100%;
  width: 100%;
}

.Map {
  border: 2px solid red; /* just to show your wrapper */
  flex: 1;
}

.openlayers-map {
  height: 100% !important;
}

Для получения дополнительной информации и кодов вы можете увидеть образец на моем codesandbox пример.

Answer 2

Вы можете установить абсолютное положение карты и установить 0, верхнюю, нижнюю, левую и правую стороны и z-индексировать что-то большое.

или вы можете попробовать установить отображение карты на блокировку и сделать уверен, что родительский элемент div находится в полноэкранном режиме, но трудно подтвердить, так как я не вижу ваши css и html.