embedding pdf file within html with 100% width and

问题:

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.

回答1:

You can try adding a style tag:

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