使 <embed> 占據整個高度

Question

我正在使用<embed>元素，因此可以內嵌呈現PDF。 它在所有瀏覽器中都能很好地工作，但是我無法在Bootstrap列中弄清楚如何讓<embed>占用整個可用高度。 這是一個柱塞。 您需要擴大預覽窗格以查看彼此相鄰的列。

這是我的標記：

<div class="container">
    <div class="row">
      <div class="col-sm-7">
        <div id="pdf-container">
          <div id="pdf">
            <embed width="100%" type="application/pdf" src="http://pdf.pdf">
          </div>
        </div>
      </div>
      <div class="col-sm-5">
        Other stuff here
      </div>
    </div>
  </div>

這是無法完全正常工作的CSS：

#pdf-container {
    bottom: 20px;
    left: 20px;
    position: absolute;
    right: 20px;
    top: 0;
}
#pdf-container #pdf {
    height: 100%;
    width: 100%;
}

我面臨的挑戰是，似乎您需要直接在'`元素上設置高度，以便它們甚至進行渲染。 將它們的寬度設置為100％是有效的，但是我無法讓高度占據100％的可用高度。

更新 ：似乎有一系列的Bootstrap類（ embed-responsive ）可能旨在處理此問題，但是當我應用它時，我的<embed>根本沒有出現。 這是一個Plunker 。

Answer 1

我把我放在響應式iframe中。 更改padding-bottom和padding-top：30px; 滿足您的需求

 /* Flexible iFrame */ .Flexible-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

 <!-- Responsive iFrame --> <div class="flexible-container"> <object width="100%" data="https://modelica.org/events/modelica2012/authors-guide/example-abstract.pdf?scrollbar=0&amp;toolbar=0&amp;navpanes=0" type="application/pdf"> <embed width="100%" type="application/pdf" src="https://modelica.org/events/modelica2012/authors-guide/example-abstract.pdf?scrollbar=0&amp;toolbar=0&amp;navpanes=0"> </object> </div> </div>