如何让p:dialog内的p:editor自适应填充对话框的全部可用空间

问题原因 #

height: 100% 生效的前提是元素所有的父级容器都有明确的高度定义。你已经给p:dialog设置了固定高度，但是PrimeFaces自动生成的dialog内部内容容器.ui-dialog-content默认没有配置高度，导致p:editor的height: 100%找不到有效的高度参考值，所以配置不生效。

解决方案 #

步骤1：添加自定义CSS样式 #

在页面的样式表中加入以下规则，适配dialog内容区和editor的高度：

/* 适配dialog内容区高度，减去header高度占满整个dialog */
#frmNote\:dlgNote .ui-dialog-content {
    height: calc(100% - 46px) !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* 让editor根容器占满内容区 */
#frmNote\:noteEditor {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
}

/* 让editor编辑区占满除工具栏外的剩余空间 */
#frmNote\:noteEditor .ui-editor-content {
    height: calc(100% - 38px) !important;
    box-sizing: border-box;
}

注：如果你的组件实际渲染后ID有变化，或者header、工具栏高度和默认值不同，可以用浏览器F12审查元素调整calc中的高度数值即可。

步骤2：添加dialog拖拽适配逻辑 #

给p:dialog新增onResize属性，保证拖拽调整对话框尺寸时，editor可以自动适配新的尺寸：

<p:dialog id="dlgNote" widgetVar="dlgNote"
          header="Note"
          position="right"
          style="height: 500px; width: 500px;"
          dynamic="false" modal="false"
          fitViewport="false" resizable="true"
          closable="true" closeOnEscape="true"
          onHide="$('#frmNote\\:quit').click();"
          <!-- 新增这一行 -->
          onResize="PF('noteEditor').editor.css('height', $('#frmNote\\:dlgNote .ui-dialog-content').height())">

修改完成后刷新页面即可看到editor已经可以自适应填充dialog的所有可用空间，拖拽调整对话框尺寸时也会同步适配。

内容的提问来源于stack exchange，提问作者Christian O.