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>

Answer 1

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