Resizing a Leaflet map to 80% of screen height

claude_chat_2025-03-02T07:36:02.642Z.md

Resizing a Leaflet map to 80% of screen height

human (Feb 15, 2025, 05:53 PM)

I am embedding a map into a webpage using leaflet. How can I make the map take up about 80% of the height of the screen? I currently have it take 80% the width with the following CSS:

        .container {
            max-width: 80%;
            margin: 0 auto;
        }

        #map {
            height: 600px;
            width: 100%;
            border-radius: 8px;
            border: 2px solid #ddd;
        }
 

assistant (Feb 15, 2025, 05:54 PM)

To make the map take up 80% of the viewport height, you can use the vh (viewport height) unit instead of a fixed pixel value. Here's how to modify your CSS:

.container {
    max-width: 80%;
    margin: 0 auto;
}

#map {
    height: 80vh;  /* Changed from 600px to 80vh */
    width: 100%;
    border-radius: 8px;
    border: 2px solid #ddd;
}

The vh unit represents a percentage of the viewport height, where 100vh equals 100% of the visible screen height. So 80vh will make the map take up 80% of the screen height, and it will automatically adjust when the window is resized.

If you find that the map is getting cut off due to other elements on the page (like headers or footers), you might need to adjust the percentage to a slightly lower value, like 75vh or 70vh, to accommodate those elements.