Repository navigation
Add better control for height when browser window is not maximized #2186
Description
Is your feature request related to a problem? Please describe.
I can set the map to something like:
folium.Map(location=[x, y], height='1000px')
and it looks proper when a browser is full screen. However if the browser window is not full screen then the map goes to a much reduced height.
If I use folium.Map(location=[x, y], height='100%')
then the height seems to potentially become 50px.
Describe the solution you'd like
I would like to be able to set both height and width at a percentage and the display is proper in a maximized or not maximized browser window. Straight forward such as this:
folium.Map(location=[x, y], height='100%')
folium.Map(location=[x, y], width='100%')
Describe alternatives you've considered
Tried a few CSS controls but could not seem to get something permanent.
Additional context
Add any other context or screenshots about the feature request here.
Activity
hansthen commentedon Sep 22, 2025
Just to confirm, the issue is that in a non-maximized browser there is extra space between the map and the browser edge? This happens both when you specify the height in pixels and in percentages?
Can you add the code you used to make the screenshot?
ezst036 commentedon Sep 25, 2025
Thank you hansthen, you are correct that I am hoping to see a scenario where the extra space at the bottom should be easier to manage.
Currently I have simply left it alone with the height setting for 100% with the assumption of use at full screen. I was hoping to correct this in some way but have yet to find something straightforward that I would expect.
This is being used in a Django app, I pull in lat/long from a preference control. The code which initiates the Folium map for me is:
"folium.Map(location=[basepref.latitude, basepref.longitude], zoom_start=9, height='100%')"
Kakarot35 commentedon May 29, 2026
Hi, I've looked into this issue and identified the root cause. When a percentage height/width is used, the map collapses in embedded contexts like Django templates because height: 100% requires every ancestor to have an explicit height. I'd like to fix this by emitting vh/vw viewport units instead of %, and adding min-height/min-width for pixel sizes. I'll raise a PR for this soon.
hansthen commentedon May 29, 2026
Ok cool. Looking forward to it.
Kakarot35 commentedon May 29, 2026
I've raised a PR for this — #2229. It fixes the collapse issue by emitting vh/vw viewport units instead of % for percentage dimensions, and adds min-height/min-width for pixel sizes. Happy to make any changes based on feedback!
fix: use viewport units for percentage map dimensions (fixes python-v…
fix: use viewport units for percentage map dimensions (fixes #2186) (#…