Question

我正在使用<embed>元素，因此我可以内联呈现PDF。它适用于所有浏览器，但我无法弄清楚如何让<embed>占用Bootstrap列中的整个可用高度。 Here是一名普通人。您需要加宽预览窗格以查看彼此相邻的列。

这是我的标记：

<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中。更改填充底部和填充顶部：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>

使<embed />占据整个高度

1 个答案: