PyQt5中如何让升级的widget的html内容填充不同屏幕尺寸的widget

Question

在 Qt 设计器中创建的一个简单的 UI 中，我有一个包含传单地图的自定义小部件。以下是我为此自定义小部件的 python 代码：

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('')

这是我用来加载传单地图的 html 文件：

<!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>

我已将 Qt 设计器中的小部件布局设置为在 window 调整大小时或全屏时调整大小。问题是我的传单地图没有随小部件调整大小。我知道我正在为 html 中保存地图的 DIV 设置一个恒定大小，但是如果没有定义固定大小，DIV 根本不可见。

我觉得 HTML 大小是 DIV 的问题，但是如何确保在调整 window 大小时我的地图也能正确调整大小。

Answer 1

问题是包含地图的 div 具有固定大小：

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

解决方法是指出它取所有可能的大小：

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

PyQt5中如何让升级的widget的html内容填充不同屏幕尺寸的widget

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

html

javascript

qwidget

pyqt5