我使用Primefaces全页布局，我想在中心单元中插入一个带有可滚动内容（和固定标题）的面板（p:panel），但它没有工作。我试过了：
p:scrollPanel p:outputPanel 这些解决方案都没有奏效。我认为主要问题是我无法设置固定的高度/宽度，因为中心单元的内容必须采用所有剩余的尺寸＆＃34;。有人可以给我一个提示吗？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:xyrion="http://www.rohag.ch/xyrion/jsf"
xmlns:p="http://primefaces.org/ui">
<h:head>
<h:outputStylesheet library="css" name="test.css"/>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="North unit content."/>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">
<h:outputText value="South unit content."/>
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">
</p:layoutUnit>
<p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true"
effect="drop">
<h:outputText value="Right unit content."/>
</p:layoutUnit>
<p:layoutUnit position="center">
<p:panel header="Title" toggleable="false" closable="false">
<p:outputPanel style="display:block; width:calc(100% - 20px); height:calc(100% - 20px); overflow: auto">
<table style="width:1000px">
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
</p:outputPanel>
</p:panel>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
layout.css中
.ui-layout-center .ui-layout-unit-content {
overflow:hidden !important;
}
答案 0 :(得分：1)
我个人不喜欢＆＃34; ui-layout＆＃34;模板。使用自定义CSS（可能是Grid CSS和XHTML）可以更好地控制模板并实现更大的控制。
对于你的问题，我会这样做：
将panel组件高度设置为100％（您可以看到ui-layout-unit-content具有计算的高度，面板高度将相对于该高度）：
#your-panel-id.ui-panel { height: 100% }
将panel内容高度设置为100％：
#your-panel-id .ui-panel-content { height: 100% }
设置outputPanel高度和溢出：
#your-outputPanel-id {
height: calc(100% - someSpecificHeight);
overflow: auto;
}
注意：＆＃34; someSpecificHeight＆＃34; - 与您的应用程序CSS相关。我测试了我的（我使用Modena模板）并且它比50px大，以便在滚动时显示所有表格元素。
希望它适合你！ ：）