Question

我正在使用angular2 / 4和angular-material（https://material.angular.io/），我想在其中粘贴PDF。问题是，pdf对象的高度比较小并且不会填满容器的整个空间。我可以手动附加一个样式=＆＃34; 500px＆＃34;高度为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()（视图高度）单位的CSS 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)"对md标签页眉和plunker标题进行70px补偿。

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

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

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

1 个答案: