embedding pdf file within html with 100% width and height?

Question

I'm trying to embed a pdf document in html code, and I tried three different approaches, which actually gave me the same result:

<embed src="files/cv_aaragon_en.pdf" width="100%" height="100%">

<object data="files/cv_aaragon_en.pdf" type="application/pdf" width="100%" height="100%">
  <p>It appears you don't have a PDF plugin for this browser.
     No problem, you can still <a href="files/cv_aaragon_en.pdf">download the PDF file.</a></p>
</object>

<iframe src="files/cv_aaragon_en.pdf" width="100%" height="100%">

shown in the figure:

Now I have the following questions:

1. The frames do not use the entire width of the page (which I believe is normal), because there is a lot of white space to both sides of the gray areas. This doesn't bother me.
2. If the definition is set to width="100%", why is it not taking the full width? Why are there gray regions? This bothers me because the pdf should be larger so that it becomes readable.
3. I could change the width, but I don't want to hard code its value so that the page looks good regardless of the device. Is there a way to obtain the actual width and put it in that width definition?
4. The same with the height, I need it to be much larger, but I don't want to hard-code its value. How is this done?
5. And finally, given the three approaches above, which one is the best in terms of loading speed?

Thank you.

Solution

You can try adding a style tag:

<iframe style="position: absolute; height: 100%" src= "files/cv_aaragon_en.pdf" />