如何使 p:media 为流体布局动态调整大小？答案

【问题标题】：How do I make p:media dynamically resizable for a fluid layout?如何使 p:media 为流体布局动态调整大小？
【发布时间】：2013-06-04 11:28:27
【问题描述】：

我正在尝试使用<p:media> (Primefaces 3.5) 来显示 PDF 内容，但无法控制 p:media 的高度。我希望媒体元素调整大小，以便在用户调整浏览器窗口大小时填充可用空间。我能够将标签上的宽度属性设置为 100%，并且媒体元素会适当地调整大小。但是，将height属性设置为100%（我想填满容器）那么height就坚决卡在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播放器的任何参数。

谁能解决我做错了什么？

【问题讨论】：

标签： pdf primefaces

【解决方案1】：

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

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

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

html, body {
    height: 100%;  
}

【讨论】：

这两项更改似乎都需要