html - 让 占据整个高度

Question

我正在使用 <embed>元素，以便我可以内联呈现 PDF。它在所有浏览器中都运行良好，但我不知道如何使用 <embed>占据我的 Bootstrap 列中的整个可用高度。 Here是一个笨蛋。您需要加宽预览 Pane 才能看到彼此相邻的列。

这是我的标记:

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