html <object> being clipped although height=100%

I am using the following code to embed a pdf in a webpage:

<!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>

However the embedded document will be clipped as the height will be set to a value that wil clip the object. Forcing size in pixels will fix the problem. How is that?

Make you tests here as jsfiddle will fail to deal with <object>

Solution

The page itself needs a size assigned to it.

set the style appropriately for your page.

Try this:

<!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>