如何讓嵌入對象佔據整個容器div的高度？

我正在使用angular2/4和角材料（https://material.angular.io/），我想在其中粘貼PDF。問題是，pdf對象的高度很小，並且不能填充容器的整個空間。我可以手動附加一個style =「500px」使高度爲500px，但如果我只是做一個100％的高度，那麼高度就會變得混亂。寬度很好，100％。如何讓嵌入對象佔據整個容器div的高度？

如何讓我的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>

來源

2017-05-24 Rolando

您是否熟悉CSS在該高度工作的方式只包裝您的內容，並且不會自動按照寬度的百分比進行縮放？問題可能是父元素或元素沒有設置高度的結果。 – LukasGuptaLeary

這意味着將高度設置爲100％意味着填充100％的父元素的高度，而不顯示100％的內容。 – LukasGuptaLeary

那我該如何填補它？我的父母元素也設置爲100％，這根本沒有幫助......這是不可能的？ JavaScript是否被扔在混合？ – Rolando

，你可以嘗試使用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頭70像素的補償。

如果你希望你的代碼是完全自動化的，可以在ngAfterViewInit勾你的組件的計算該補償值，使用Renderer2或ElementRef類，然後在你的HTML ngStyle指令中使用它

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

來源

2017-05-31 15:57:59 Andriy

如何讓嵌入對象佔據整個容器div的高度？

回答

相關問題