将 pdf 嵌入 html 高度不会拉伸

【问题标题】：embed pdf in html height doesn't streach将 pdf 嵌入 html 高度不会拉伸
【发布时间】：2019-10-26 05:39:58
【问题描述】：

我正在尝试在我的 html 页面中嵌入 pdf：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GetPDF</title>
</head>
<body>
    <object data="/Content/Exams/2016/T205_16.pdf" type="application/pdf" width="100%" height="100%"></object>
</body>
</html>

但是当我运行它时，我得到了 100% 的宽度（很好），但高度只有 100 像素，而不是预期的 100%。

【问题讨论】：

标签： html css asp.net-mvc

【解决方案1】：

默认情况下，HTML 块元素（包括 <html> 和 <body> 元素）仅与其内容一样高。也就是说，它们会“缩小”以适应其内容的高度。 PDF 对象的 height 属性设置为 100%，但由于这是其父对象的 100%，而不是视口，并且 PDF 的父对象正在缩小以适应内容，因此 PDF 对象将显示在其最小高度。

您需要将 PDF 对象的父级（<body> 元素）设置为视口的高度。这可以通过 CSS 轻松完成 - 只需将 <html> 元素的 height CSS 属性设置为 100% 以使其填充视口，然后将 <body> 元素的高度设置为 100% 以填充 <html> 元素。

将此代码添加到您的<head>：

<style>
    html, body {
        height: 100%;
    }
</style>

【讨论】：