How can I make the map to use 100% height?

[mason23zh]

I want my Map component to use 100% height instead of providing a fixed value such as screen height or specific pixel number.
This is my code for now:

<Map
                projection={{ name: "mercator" }}
                id="mainMap"
                ref={mapRef}
                cursor={"pointer"}
                mapboxAccessToken={import.meta.env.VITE_MAPBOX_ACCESS_TOKEN}
                mapStyle={import.meta.env.VITE_MAPBOX_MAIN_STYLE}
                initialViewState={viewState}
                style={{
                    marginBottom: "0",
                    height: "94.6vh",  //issue is here, if I change this value to 100%, the map won't show.
                    width: "100vw",
                    position: "relative"
                }}
                onMove={onMove}
                dragPan={true}
            >

And this is what it looks like in full screen:

There is a small white gap at the bottom of the screen due to the height issue.
If I make the screen smaller, due to the change size of the header the white gap will be bigger:

Or, 2 scroll bars will appears:

I've checked the issue 604, but it's not helping because it was using ReactMapGL component instead of Map component.

[mason23zh]

Ok, I solved this issue by changing the relative in map style to absolute, and I also added an useEffect to calculate the height of the map itself:

const [mapStyle, setMapStyle] = useState({
        height: "100%", // Default style
        width: "100%",
        position: "absolute"
    });

    useEffect(() => {
        const navbarHeight = document.querySelector(".main-navbar").clientHeight;
        const mapHeight = `calc(100vh - ${navbarHeight}px)`;
        setMapStyle(prevStyle => ({
            ...prevStyle,
            height: mapHeight
        }));
    }, []);

[yannklein]

Tell me if that would work for you or not, having the same problem, I solved it this way:

<div className="flex" />
   <h1> Hey!</h1>
   <Map style={{ width: '100vw', height: 'inherit', flexGrow: 1 }} />
 </div>

The key, for me, was to kill the auto height: 100% from mapbox by setting it to inherit.