Question

我正在尝试使用<p:media>（Primefaces 3.5）来显示PDF内容，并且无法控制p：media的高度。我希望media元素的大小可以在用户调整浏览器窗口大小时填充可用空间。我能够将标签上的width属性设置为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"/>

也没有效果。展示说可调整大小为任何JSF组件提供了可调整大小的行为，所以我认为它应该可行（我真正想要的是p：media元素调整大小以填充其父级的100％。）...

在所有浏览器中看起来都是一样的。我搜索过，并且无法找到任何可能影响此行为的pdf播放器参数文档。（事实上，我根本无法找到pdf播放器的任何参数。

任何人都可以理清我做错了吗？

Answer 1

如果<p:media>标记包含在<h:form>标记中，则需要添加样式属性：

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

您可能还需要在样式表中设置html和body标记的高度：

html, body {
    height: 100%;  
}

如何使p：media动态调整大小以适应流畅的布局？

1 个答案: