Search code examples
htmlpdfembed

Set 100% browser height when embedding a PDF

I try to make a very simple site that is only displaying an embedded PDF. The PDF viewer should have the same size as the browser window. However, I was unsuccessful in showing the full PDF height:

<!DOCTYPE html>
<html height="100vh" margin="0">
<body height="100vh" margin="0">
<embed src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="100vh" 
 type="application/pdf">
</body>
</html>

The output looks like this in different browser I tried (Safari, Chrome, Firefox - all on macOS Ventura): https://i.sstatic.net/DPruB.png

I already tried to set the height to 100% instead or exchanging height with min-height. But for any reason, it does not work. Setting the margins/paddings to 0 as recommended in other posts has also no result

Solution

  • Depending on browser there is some need to avoid 100%, so PDF embed iFrame and object are usually handled exactly the same way, if the height is small the scrollbars appear even if not set by content see top left behaviour.

    enter image description here

    Setting Scrollbars to zer0 will usually be ignored and its much the same for toolbars and side pane, they will appear when needed by user interface.

    <!DOCTYPE html><head><style>
html, body, embed, iframe, object { margin: 0!important; border: 0; width: 99vw; height: 97vh; }
</style></head><body><center>
  <embed src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0" type="application/pdf" />
</center></body></html>

    enter image description here

    The Anatomy of a browser is a Users Interface where they have full control enter image description here