pdf - 我如何使 p :media dynamically resizable for a fluid layout?

Question

我正在尝试使用 <p:media> (Primefaces 3.5) 显示 PDF 内容并且无法控制 p:media 的高度。我希望媒体元素的大小能够在用户调整浏览器窗口大小时填充可用空间。我能够将标签上的宽度属性设置为 100%，并且媒体元素会适本地调整大小。但是，设置height属性为100%(我要填满容器)那么高度就坚决卡在了150px(而且一直是150px)。

以下代码大小填充可用宽度但不填充高度。

<p:media  id="theDoc" player="pdf" value="#{userBean.streamedDocument}" height="100%" width="100%">
    <h:outputText value="No renderer available..." />
</p:media>

如果我指定以 px 表示的高度，那么该高度是有效的，但当然不会随着浏览器的变化而调整大小...

我试过直接在元素上使用 CSS 样式，并在结果 <div> 上使用/<object>层次结构，但似乎没有任何内容允许浏览器更改显示的 pdf 的高度。

此外，尝试使用 <p:resizable>像这样

<p:media id="theDoc" player="pdf" value="#{userBean.streamedDocument}" height="100%" width="100%">
    <h:outputText value="No renderer available..." />
</p:media>
<p:resizable for="theDoc"/>

也没有效果。展示柜说 resizable 可以为任何 JSF 组件提供可调整大小的行为，所以我认为它应该可以工作(我真正想要的是 p:media 元素调整大小以填充其父元素的 100%。)...

这似乎在所有浏览器中都是一样的。我已经搜索过，但无法找到任何可能影响此行为的 pdf 播放器参数的文档。 (事实上​​我根本找不到 pdf 播放器的任何参数。

任何人都可以解决我做错了什么吗？

Answer 1

如果您的 <p:media>标记包含在 <h:form> 中标签，那么你需要添加一个样式属性:

<h:form style="height: 100%">

您可能还需要设置 html 的高度和 body样式表中的标签:

html, body {
    height: 100%;  
}