Embed PDF at full height

Question

My question ... is it possible to embed a PDF in a HTML document where the height is always 100%. The problem is the actual height of the pdf could vary and the layout needs to respond to this.

Answer 1

There are several ways to embed PDF in HTML.

One would be to use PDFObject. The below example works out of the box in firefox, you'll find further instructions for most browsers on their website.

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
    <p>It appears you don't have a PDF plugin for this browser.
    No biggie... you can <a href="myfile.pdf">click here to
    download the PDF file.</a></p>
</object>

Or you could use the google drive viewer to display any PDF (and quite a few more file types):

<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>

Using the drive viewer your visitors don't need any additional software/plugin to view the files.

You can then adjust the height of the PDF container with css. i.e

#yourcontainer { height: 100vh; }