如何在JavaScript中设置嵌入PDF的宽100%、高97.5%？

你的代码有几个关键问题导致宽高设置不生效：

• 你把size类加到了pdfsize容器上，但创建的<embed>元素是直接追加到body里，根本没放在这个容器内，样式完全没作用到PDF上。
• 百分比高度的元素需要父元素有明确的高度值，否则浏览器无法确定参照高度，所以得先给html和body设置100%高度。

修改后的代码如下：

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #pdfsize {
    width: 100%;
    height: 97.5%;
  }
  #pdfsize embed {
    width: 100%;
    height: 100%;
  }
</style>

<button type="button" id="show" onclick="PDFshow(this);">PDF anzeigen</button>
<div id="pdfsize"></div>

<script>
  function PDFshow(x) {
    x.style.visibility = 'hidden';      
    var embed = document.createElement("EMBED");
    embed.setAttribute("src", "Doku.pdf");
    document.getElementById("pdfsize").appendChild(embed); 
  }
</script>

改动说明：

• 给html和body设置height:100%并清除默认边距，确保父元素有完整的高度参照。
• 直接给pdfsize容器设置目标宽高，简化样式逻辑。
• 让容器内的embed元素继承父容器的宽高，保证PDF填满整个容器。
• 将创建的embed元素放到pdfsize容器内，让样式能正确作用到PDF上。
• 移除多余的classadd函数，直接在创建embed时完成容器填充，简化代码逻辑。

这样修改后，点击按钮就能看到占满100%宽度、97.5%高度的PDF了。

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