Folium map fill white gap in mobile phone

Question

I make a web app using Flask, in the body there are navbar and Folium map. It works fine in computer but when I try to open it in mobile phone, the map doesn't fill the entire screen. So I try to make this class

class React(MacroElement):
   _template = Template(u"""
            {% macro script(this, kwargs) %}
              $(window).on("resize", function() {
                $("#{{this._parent.get_name()}}").height($(window).height()).width($(window).width());
                {{this._parent.get_name()}}.invalidateSize();
                }).trigger("resize");
            {% endmacro %}
            """) #noqa
   
   def __init__(self):
        super(React, self).__init__()
        self._name = 'React'

and then add to my map by m.add_child(React()). Unfortunately it doesn't change anything. Also I want to avoid using FullScreen Plugins. I've tried the CSS approach where you set the height and width of the ancestor container to 100% but it didn't work

Answer 1

[Solved] By making the ancestors container 100vh or 100% then add this

fig = branca.element.Figure(height="100%")
fig.add_child(m)

I don't need the React class anymore