埋め込みオブジェクトを取得してコンテナdivの全体の高さを取る方法は？

Question

私はangular2/4とangle-material（https://material.angular.io/）を使用しています。その中にPDFを貼りたいと思います。問題は、pdfオブジェクトapeparsの高さが小さく、コンテナの全領域を満たしていないことです。私は手動で高さを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

あなたはvh（ビューの高さ）単位でCSS calc()機能を使用しようとすることができます

<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> 

私はMDタブヘッダとplunkerヘッダの70ピクセル補償とここstyle="height:calc(100vh - 70px)"を使用。あなたのコードが完全に自動化したい場合は

、あなたはRenderer2かElementRefクラスを使用して、コンポーネントのngAfterViewInitフックにこの補正値を算出し、その後、あなたのHTMLにngStyleディレクティブの中にそれを使用することができます

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