Как заставить внедренный объект заняться всей высотой контейнера div?

Я использую angular2/4 и angular -материал (https://material.angular.io/), и я хочу вставить в него PDF файл, Проблема в том, что высота apepars для PDF-объектов мала и не заполняет все пространство контейнера. Я могу вручную прикрепить стиль = "500 пикселей", чтобы высота была 500 пикселей, но если я просто сделаю высоту 100%, тогда высота будет испорчена. Ширина в порядке с 100%.

Как мне получить свой pdf-объект для заполнения всей высоты контейнера?

<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>

Ответы

Ответ 1

вы можете попробовать использовать функцию CSS calc() с единицами vh (высота представления):

<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>

Я использовал здесь style="height:calc(100vh - 70px)" с компенсацией 70px для заголовков md tab и заголовков плунжера.

Если вы хотите, чтобы ваш код был полностью автоматизирован, вы можете рассчитать это значение компенсации в ngAfterViewInit hook вашего компонента, используя Renderer2 или ElementRef, а затем используйте его в директиве ngStyle в своем HTML

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