Automati c регулирует высоту по компоненту реагирования google-maps

Question

Я пытаюсь создать приложение карты с помощью реагировать и карты Google, мне удается создать компонент карты Google и использовать карту, однако, когда добавлен компонент навигационной панели, я не могу найти способ отрегулировать высоту карты в пространство, оставшееся без полосы прокрутки.

Компонент Navbar взят из bootstrap, я не знаю, имеет ли это значение.

КОМПОНЕНТ КАРТЫ

import React from 'react';
import { GoogleMap, withScriptjs, withGoogleMap } from 'react-google-maps';

const INIT_VALUES = {
  initialZoom: 10,
  center: { lat: -27.593500, lng: -48.558540 },
};

function Map() {
  return (
    <GoogleMap
      defaultCenter={INIT_VALUES.center}
      defaultZoom={INIT_VALUES.initialZoom}
    />
  );
}

const WrappedMap = withScriptjs(withGoogleMap(Map));

export default WrappedMap;

Компонент приложения

import React, { useEffect } from 'react';
import MapNavbar from './components/navbar/index';
import WrappedMap from './components/map/index';
import './App.css';

const MAP_KEY = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=******';

const mapStyles = {
  width: '100%',
  height: '100vh',
};

async function fetchData(callback) {
  const response = await fetch('http://localhost:5000/');
  const data = await response.json();
  callback(data);
}

function App() {
  useEffect(() => {
    fetchData((a) => console.log(a));
  }, []);

  return (
    <div className="App">
      <MapNavbar />
      <div style={mapStyles}>
        <WrappedMap
          googleMapURL={MAP_KEY}
          loadingElement={<div style={{ height: '100%' }} />}
          containerElement={<div style={{ height: '100%' }} />}
          mapElement={<div style={{ height: '100%' }} />}
        />
      </div>
    </div>
  );
}

export default App;

Answer 1

Если вы знаете точную высоту навигационной панели, вы можете использовать свойство CSS calc (документы здесь ).

С помощью свойства cal c вы можете просто установить свою карту Контейнер должен выглядеть примерно так:

height: calc(100vh - navbarHeight)

Если вы не знаете высоту панели навигации, вы можете использовать flex, чтобы растянуть контейнер карты до оставшегося пространства приложения.