如何让嵌入对象占用容器div的整个高度？

Question

我正在使用angular2/4和角度材料(https://material.angular.io/),我想在其中粘贴PDF.问题是,pdf对象的高度比较小并且不会填满容器的整个空间.我可以手动附加style ="500px"以使高度为500px,但如果我只是高度为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>

Answer 1

你可以尝试使用calc()带有vh(视图高度)单位的CSS 函数:

<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标签和plunker标头.

如果您希望代码完全自动化,可以ngAfterViewInit使用Renderer2或ElementRef类在组件的钩子中计算此补偿值,然后ngStyle在HTML中的指令中使用它

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