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

【问题标题】：How to get embedded object to take up the whole height of the container div?如何让嵌入对象占据容器 div 的整个高度？
【发布时间】：2017-10-25 06:18:28
【问题描述】：

我正在使用 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>

【问题讨论】：

您是否熟悉 CSS 在该高度仅包裹您的内容并且不会像宽度那样自动缩放到 100% 的工作方式？问题可能是由于父元素或元素没有设置高度造成的。
这意味着将高度设置为100%意味着填充父元素100%的高度而不显示100%的内容。
那我怎么让它填满呢？我的父母元素也设置为 100%，这根本没有帮助……这不可能吗？ javascript是否必须混在一起？
它需要一直向上到父链才能包含正文。 body 元素未设置为 100% 或特定值通常是导致相对高度问题的原因。
Embed PDF at full height的可能重复

标签： html css angular

【解决方案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)"，对 md 选项卡标题和 plunker 标题进行了 70px 补偿。

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

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

【讨论】：