How to make the html content of a promoted widget fill the widget in different screen size in PyQt5

In a simple UI created in Qt designer, I have a custom widget which holds a leaflet map. Following is my python code for this custom widget:

from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

    
class LeafWidget (QWidget):
    def __init__(self, parent=None):
        QWidget.__init__(self, parent)
        self.browser = QWebEngineView()
        self.browser.settings().setAttribute(QWebEngineSettings.JavascriptEnabled, True)
       
        self.browser.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('mymap.html')))
        self.browser.loadFinished.connect(self.onLoadFinished)
    

        lay = QVBoxLayout(self)
        lay.addWidget(self.browser)


    def onLoadFinished(self, ok):
        if ok:
            self.browser.page().runJavaScript('')

And here is the html file which I use to load the leaflet map:

<!DOCTYPE html>
  <head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

    <style>
    #my-map {
      width:1200px;
      height:450px;
    }
    </style>
  </head>

  <body>
    <div id="my-map"></div>
    <script>
          var osmUrl1 = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
          var osm = L.tileLayer(osmUrl1, {id: 'MapID', attribution:'1'});
          var baseMaps = {
            "osm": osm, 
          };
          var map = L.map('my-map').setView([40,-90], 8);
          osm.addTo(map)
    </script>
  </body>
</html>

I have set the layout for the widget in Qt designer to resize when the window is resized or at full screen. The problem is that my leaflet map is not resizing with the widget. I know that I am setting a constant size for the DIV that holds the map in html, but without defining a fixed size, the DIV is not visible at all.

I feel like it's a HTML issue with the DIV size, but how can I make sure that my map resizes properly when the window is resized.

Solution

The problem is that the div that contains the map has a fixed size:

#my-map {
  width:1200px;
  height:450px;
}

The solution is to point out that it takes all the possible size:

#my-map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}