html <object> 尽管高度 = 100%，但仍被剪裁

Question

我正在使用以下代码在网页中嵌入 pdf：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf">Download PDF</a>.</p></object>

</body>
</html>

但是嵌入文档将被裁剪，因为高度将被设置为将裁剪对象的值。强制以像素为单位的大小将解决问题。怎么样？

让你测试 here 因为 jsfiddle 将无法处理 <object>

Answer 1

页面本身需要分配一个大小。

为您的页面设置适当的样式。

试试这个：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{height: 100%;width: 100%}
</style>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf">Download PDF</a>.</p></object>

</body>
</html>

html <object> 尽管高度 = 100%，但仍被剪裁

html <object> being clipped although height=100%

html

clip