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

Question

我正在使用Angular2/4和Angular-Material（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>

- Rolando

---

你是否熟悉 CSS 的工作方式，即高度仅包裹内容而不像宽度一样自动缩放到 100%？问题可能是由于父元素或元素没有设置高度导致的。 - LukasGuptaLeary

这意味着将高度设置为100％意味着填充父元素高度的100％，而不是显示内容的100％。 - LukasGuptaLeary

那么我该如何让它填充呢？我的父元素也设置为100%，但一点用也没有...这不可能吧？需要加入JavaScript吗？ - Rolando

它需要一直沿着父元素链向上，以包括body元素。如果body元素未设置为100％或特定值，则通常会导致相对高度问题。 - LukasGuptaLeary

可能是Embed PDF at full height的重复问题。 - Sreetam Das

Answer 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)"，其中70像素是为了补偿md选项卡头部和Plunker头部。

如果您想让您的代码完全自动化，您可以在组件的ngAfterViewInit挂钩中使用Renderer2或ElementRef类来计算此补偿值，然后在HTML中使用ngStyle指令将其应用到样式中。

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

- Andriy