How to get embedded object to take up the whole height of the container div?

Question

I am using angular2/4 and angular-material (https://material.angular.io/) and I want to stick a PDF in it. The problem is, the height of the pdf object apepars to be small and does not fill the whole space of the container. I can manually attach a style="500px" to have the height be 500px, but if I just do a height of 100%, then the height is messed up. Width is fine with 100%.

How do I get my pdf object to fill up the entire height of the container?

<md-tab-group>
<md-tab label="Tab 1">
    <object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">
   <p><b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/sample-3pp.pdf">Download PDF</a>.</p>
</object>
  </md-tab>
  <md-tab label="Tab 2">Contents of Tab 2</md-tab>
</md-tab-group>

Are you familiar with the way CSS works in that height only wraps your content and doesn't automatically scale to 100% the way width does? The problem is probably a result of a parent element or elements not having a set height. — LukasGuptaLeary, May 24 '17 at 19:22
This means that setting the height to 100% means filling 100% of the parent element's height not showing 100% of the content. — LukasGuptaLeary, May 24 '17 at 19:37
Then how do I get it to fill? My parents element is also set to 100%, which does not help at all... is this not possible? Does javascript have to be thrown in the mix? — Rolando, May 24 '17 at 20:28
It needs to go all the way up the parent chain to include the body as well. The body element not being set to 100% or a specific value is usually the cause of relative height problems. — LukasGuptaLeary, May 25 '17 at 05:25
Possible duplicate of [Embed PDF at full height](https://stackoverflow.com/q/25766131/5283213) — Sreetam Das, May 31 '17 at 05:28

Andriy · Accepted Answer · 2020-11-04T17:53:17.827

you can try to use CSS calc() function with vh (view height) units:

<md-tab-group>
  <md-tab label="Tab 1">
    <object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2" 
            type="application/pdf" 
            style="height:calc(100vh - 70px)"
            width="100%">
      <p>
        <b>Example fallback content</b>: This browser does not support PDFs. 
        Please download the PDF to view it: 
        <a href="/pdf/sample-3pp.pdf">Download PDF</a>.
      </p>
    </object>
  </md-tab>
  <md-tab label="Tab 2">Contents of Tab 2</md-tab>
</md-tab-group>

I used here style="height:calc(100vh - 70px)" with 70px compensation for md tab headers and plunker headers.

If you want your code to be fully automated, you can calculate this compensation value in ngAfterViewInit hook of your component, using Renderer2 or ElementRef classes, and then use it within ngStyle directive in your HTML

plunker: https://plnkr.co/edit/LRscYr4A13HEjWAmCNo9?p=preview

How to get embedded object to take up the whole height of the container div?

1 Answers1