panelStretchLayout的“顶部”和“中心”面重叠

Question

我正在寻找一个类似于以下内容的模板：

实际渲染的是什么：

这是我正在使用的布局代码：

<af:panelStretchLayout id="pt_psl1">
    <f:facet name="top">                
        <af:panelGroupLayout id="pgl_top" styleClass="header">
            <div class="logo">
            .
            .
            .
            </div>

            <div class="searchDiv">
            .
            .
            .
            </div>

            <div class="userDiv">
            .
            .
            .
            </div>
        </af:panelGroupLayout>  
    </f:facet>

    <f:facet name="center">
        <af:panelGroupLayout id="pt_pgl2" styleClass="postHeaderDiv">
            <af:panelSplitter id="pt_ps1">
                <f:facet name="first">
                    <h:outputFormat value="outputFormat1" id="pt_of1"/>
                </f:facet>
                <f:facet name="second">
                    <h:outputFormat value="outputFormat2" id="pt_of2"/>
                </f:facet>
            </af:panelSplitter>
        </af:panelGroupLayout>
    </f:facet>
</af:panelStretchLayout>

问题是facet“center”似乎是嵌入facet“top”内部，并且内联高度为50px以及overlfow:hidden属性阻止了facet“center”内容显示在页面。

在进一步调查呈现的HTML时，我发现了以下内容：

我不太明白为什么我的方面“中心”内容正在成为一个“顶级”的孩子，而它本应该超出方面的“顶级”div。我的模板标记有什么问题吗？

Answer 1

我强烈建议您使用较新的af：panelGridLayout组件来设计模板。

在您的情况下，您不应该在布局定义中混合使用div HTML标记 - 只使用ADF Faces标记。 你有没有为af中的中心部分定义你想要的高度：panelStretchLayout？

您也不需要在分割器周围使用panelGroupLayout。

Answer 2

我在“顶层”方面有一个未闭合的div。关闭它解决了这个问题。