使<embed>占据整个高度

Question

我使用了一个<embed>元素，这样我就可以内联地呈现一个PDF了。它在所有浏览器中都工作得很好，但是我不知道如何让<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%。

UPDATE：似乎有一系列引导类(.embed-responsive)可能是为了处理这个问题，但是当我应用它时，根本就不会出现它的<embed>。这是一个柱塞。

Answer 1

我把我的放在有反应的iframes里。更改填充物底部和填充顶部:30 to；以满足您的需要。

​

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

​