嵌入PDF时设置100%浏览器高度的问题求助

你的核心问题是HTML属性与CSS属性混淆，以及未彻底清除浏览器默认样式导致高度无法占满。以下是修正后的方案：

修正后的代码 #

<!DOCTYPE html>
<html style="height: 100%; margin: 0; padding: 0;">
<body style="height: 100%; margin: 0; padding: 0; overflow: hidden;">
  <embed 
    src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0" 
    width="100%" 
    height="100%"
    style="display: block;"
    type="application/pdf"
  >
</body>
</html>

关键修改点说明 #

• 正确应用CSS样式：原来的html height="100vh"写法错误，height、margin是CSS属性，必须通过style属性或外部样式表声明，否则浏览器无法识别。
• 清除默认间距：浏览器默认给body添加margin: 8px，html也可能有默认内边距，必须将两者的margin和padding设为0，避免留白。
• 确保高度传递：将html和body的height设为100%，让内部的embed能继承完整视口高度。
• 消除inline元素间隙：embed默认是inline-block元素，会产生基线对齐的底部空白，设置display: block可彻底消除此间隙。
• 隐藏多余滚动条：给body添加overflow: hidden，防止PDF内容超出视口时出现浏览器滚动条（若需滚动PDF内部内容，可移除该属性）。

如果需要更规范的写法，可使用内部样式表：

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      height: 100%;
      overflow: hidden;
    }
    embed {
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
</head>
<body>
  <embed 
    src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0" 
    type="application/pdf"
  >
</body>
</html>

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