实现GeoGebra Applet自适应响应式容器的动态尺寸调整

你的问题核心是父元素（html、body）没有设置明确高度，导致wrapperDiv的height:100%找不到有效参照，offsetHeight获取的数值不符合预期，最终setSize设置高度失效。

修复步骤： #

• 补全html和body的样式
  给html、body加上100%高度，同时清除默认的margin和padding，避免出现滚动条：

  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #wrapperDiv {
    width: 100%;
    height: 100%;
  }
  

• 修改Applet初始化参数
  把params里的宽高从固定数值改成"100%"，让Applet初始就适配容器：

  var params = {
    appName: "graphing",
    width: "100%",
    height: "100%",
    showToolBar: true,
    showAlgebraInput: true,
    showMenuBar: true,
  }
  

• 调整尺寸更新的时机
  借助Applet的注入回调，确保在Applet加载完成后再执行尺寸更新，避免初始化未完成导致的问题：

  window.addEventListener("load", function () {
    applet.inject("ggb-element", function() {
      updateGGBAppletSize()
    })
  })
  

完整修复代码： #

<!doctype html>
<html>
  <head>
    <script src="https://www.geogebra.org/apps/deployggb.js"></script>

    <style>
      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #wrapperDiv {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <script>
      var params = {
        appName: "graphing",
        width: "100%",
        height: "100%",
        showToolBar: true,
        showAlgebraInput: true,
        showMenuBar: true,
      }
      var applet = new GGBApplet(params, true)
      window.addEventListener("load", function () {
        applet.inject("ggb-element", function() {
          updateGGBAppletSize()
        })
      })
      window.addEventListener("resize", updateGGBAppletSize)
      function updateGGBAppletSize() {
        const wrapperDiv = document.getElementById("wrapperDiv")
        const width = wrapperDiv.offsetWidth
        const height = wrapperDiv.offsetHeight

        ggbApplet.setSize(width, height)

        console.log(width, height)
      }
    </script>

    <div id="wrapperDiv">
      <div id="ggb-element"></div>
    </div>
  </body>
</html>

原理说明：当html和body设置为100%高度后，wrapperDiv的100%高度就有了明确的参照（当前视口高度），此时offsetHeight能正确获取容器的实际高度，setSize就能正常设置Applet的高度了。

内容的提问来源于stack exchange，提问作者Snickleblor