如何在 primefaces 中创建具有百分比高度的对话框

Question

我想p:dialog在 primefaces 中创建一个组件，其大小以百分比给出：

<p:dialog header="Dialog" widgetVar="dlg" width="70%" height="70%">
  Some content
</p:dialog>

上面的代码创建了一个具有正确宽度值的组件。然而，对话框的高度被设置为某个非常小的值（绝对不是 70%）。

我的问题是：如何设置对话框的百分比高度？

我做了一些研究，发现在 primefaces 代码中，height值被明确设置为“auto”，并且 height 属性被分配给 content div。这解释了为什么我的代码不起作用，但是我能做些什么来克服这个问题呢？

Answer 1

我找到了一种使用 javascript 来做到这一点的方法。应修改组件定义：

<p:dialog id="dialog" header="Dialog" widgetVar="dlg" width="70%" height="100%">
  Some content
</p:dialog>

这样，内容将完全填满对话框。现在应该调用以下 javascipt 代码：

var htmlTag = document.getElementById('dialog');
htmlTag.style.height = Math.floor(window.innerHeight*0.7)+"px";

这会将对话框高度调整为窗口高度的 70%。