Primefaces 布局答案

【问题标题】：Primefaces layoutPrimefaces 布局
【发布时间】：2014-05-22 22:45:24
【问题描述】：

我有一个将属性 fullpage 定义为 false 的 primefaces 布局（因为我不希望我的页面的孔内容在不滚动的情况下适合浏览器），问题是当我为页脚定义布局单元时（位置=南），它呈现在标题之前！请帮忙，这是我的部分代码和图片；

<p:layout fullPage="false">
            <!-- HEADER -->
            <ui:insert name="headerModelA">
                <p:layoutUnit position="north" size="165">  
                    <p:panelGrid >
                       <!-- code -->
                    </p:panelGrid>
                </p:layoutUnit>
            </ui:insert>
            <!-- LEFT -->
            <p:layoutUnit position="west" size="150" header="Left Panel">  
                <h:outputText value="West unit content." />  
            </p:layoutUnit>  
            <!-- RIGHT -->
            <p:layoutUnit position="east" size="200" header="Right Panel">  
                <h:outputText value="Right unit content." />  
            </p:layoutUnit>  
            <!-- CENTER CONTENT -->
            <p:layoutUnit position="center">  
                <ui:insert name="mainContentA">
                    <h:form id="formBanner">
                        <!-- some other content -->
                    </h:form>          
                </ui:insert>
            </p:layoutUnit>
            <!-- FOOTER -->
            <ui:insert name="footer">
                <p:layoutUnit position="south" size="100">
                    <!-- footer info -->
                </p:layoutUnit> 
            </ui:insert>
</p:layout>

【问题讨论】：

如果你不使用插入并渲染一个简单的标签会发生什么？它是否正确渲染？或者嵌套 -> <south><insert /></south> 看看是否有效。
没有插入标签，问题仍然存在。不明白您建议的替代嵌套...那是 PF 组件吗？还是一个简单的 HTML 组件？感谢您的回答！
这是伪代码。我建议插入可能是问题所在。如果您删除了它并且一个简单的示例不起作用，那么对我来说这听起来像是糟糕的 CSS。

标签： jsf layout primefaces footer

【解决方案1】：

这可能是一个错误。 fullPage="false" 南面板的样式为 position:absolute 和 top:0px 并且 div 显示在顶部。

尝试强制样式。根据您的应用调整顶部像素。

<p:layoutUnit position="south" size="100" 
style="postion:relative !important; top:400px !important">

完整代码

<p:layout fullPage="false">
            <!-- HEADER -->
                <p:layoutUnit position="north" size="165">  
            <ui:insert name="headerModelA">
                    <p:panelGrid >
                                           <h1>NORTE</h1>

                    </p:panelGrid>
            </ui:insert>
                </p:layoutUnit>
            <!-- LEFT -->
            <p:layoutUnit position="west" size="150" header="Left Panel">  
                <h:outputText value="West unit content." />  
            </p:layoutUnit>  
            <!-- RIGHT -->
            <p:layoutUnit position="east" size="200" header="Right Panel">  
                <h:outputText value="Right unit content." />  
            </p:layoutUnit>  
            <!-- CENTER CONTENT -->
            <p:layoutUnit position="center">  
                <ui:insert name="mainContentA">
                    <h:form id="formBanner">
                    <h1>CENTER</h1>
                    </h:form>          
                </ui:insert>
            </p:layoutUnit>
            <!-- FOOTER -->
                <p:layoutUnit position="south" size="100" style="postion:relative !important; top:400px !important">
            <ui:insert name="footer">
                    <h1>FOOTER</h1>
            </ui:insert>
                </p:layoutUnit> 
</p:layout>

【讨论】：

这似乎是一个很好的解决方案，现在我的问题是，如何在 px 中定义上边距，因为知道页面的高度会根据其内容而变化。有没有办法根据标题高度+中心内容高度来定义上边距？