Question

我有一个带有“标题”，“页脚”，“侧边菜单”和“内容区域”的页面。

我正在尝试使用PrimeFaces布局排列它们，如下所示：

标题 - ＆gt;北

页脚 - ＆gt;南

侧面菜单 - ＆gt;东

内容区 - ＆gt;中心

乍一看，它工作正常。

但是，我的侧边菜单包含将更改中心区域内容的链接。目前，当我单击其中一个链接时，如果新内容的长度大于为中心layoutunit定义的长度，则中心区域的内容将会更改，并且中心区域将显示垂直滚动条。

我正在寻找的行为是动态调整中心区域的大小，按下页脚（南部layoutunit）并显示整个页面的滚动条。

我使用PrimeFaces布局是否正确？我应该用别的吗？

这是我的“正文”代码：

<h:body>

<p:layout fullPage="true">

    <p:layoutUnit position="north" size="100">
        <ui:include src="header.xhtml" />
    </p:layoutUnit>

    <p:layoutUnit position="south" size="200">
        <ui:include src="footer.xhtml" />
    </p:layoutUnit>

    <p:layoutUnit position="east" size="260">
        <ui:include src="side-menu.xhtml" />
    </p:layoutUnit>

    <p:layoutUnit position="center">
        <ui:insert name="body-content">
        </ui:insert>
    </p:layoutUnit>
</p:layout>
</h:body>

感谢您的帮助

Answer 1

我使用PrimeFaces布局是否正确？我应该使用其他东西吗？

回答：这取决于。我认为，p:layout fullPage="true"是一个组件，想要创建一个页面超级快速，简单，并且没有足够的时间来处理视图层。如果展示示例几乎不符合您的要求，则没有理由放弃它。

但是，如果你想自定义或改变它的行为，或者它的功能停止，滚动你自己。

我准备了一个适合你要求的启动示例，正如我所说，它不完整，但它可以激励你。让我们从组件开始;

<h:form>
    <p:fieldset legend="West" styleClass="west">

    </p:fieldset>
    <p:panel styleClass="north">

    </p:panel>
    <p:fieldset legend="East" styleClass="east">

    </p:fieldset>
    <p:fieldset legend="Center" styleClass="center">   

    </p:fieldset>

    <p:panel styleClass="footer">
        <p:commandButton onclick="makeMe();" value="SeeTheMagic"></p:commandButton>
    </p:panel>
</h:form>

可以看出，这些是PrimeFaces的基本组件，这里指的是CSS本身。（我使用了p:fieldset，因为我喜欢看起来你可以使用p:panel代替。）

让我们从footer开始吧。有一件事值得一提，它的位置，我们只是通过bottom:0px和position:absolute将它放在页面底部。

.footer{
    width:100%;
    height:30px;
    padding:30px;
    background: #000007;
    clear: both;
    position: absolute;
    bottom: 0px;
}

中心组件由margin 0 auto以HORIZONTALLY为中心。还有其他方法可以肯定。此外，如果你想垂直居中，通过保证金很容易。并且margin-top:70px只是防止与北面板重叠。

.center{
    margin: 0 auto;
    width:650px;
    height:200px;
    margin-top: 70px;
    background-color: #f7f7f7;
}

东部位于最左侧和西侧;反之亦然。

.east{
    width:200px;
    height:400px;
    position: absolute;
    margin-top: 30px;
    right: 0px;
    background-color: #f7f7f7;
}

.west{
    width:200px;
    height:400px;
    margin-top: 30px;
    position: absolute;
    left: 0px;
    background-color: #f7f7f7;
}

North组件就像页脚一样，但它通过top:0px位于顶部。

.north {
    background-color: black;
    position: absolute;
    top:0px;
    width: 100%;
    height: 40px;
}

现在页面看起来像......类似于p:layout fullPage="true"。你当然应该定制它的looknfeel，也许你可以看看更新的CSS属性，如box-shadow（对于北面板）或等等。因此，你的要求：

我正在寻找的行为是动态调整中心区域的大小，按下页脚（南layoutunit）并显示滚动条整页。

我准备了一个最初从中心面板溢出的内容，然后页脚上有一个按钮，表示某事。关于魔法，它调用makeMe() js函数，它执行：

function makeMe() {
    $(".center").css({
        "height":"auto",
        "word-wrap": "break-word"
    });
    $(".footer").css({
        "position":"relative"
    });
}

简单地展开p:panel的高度，现在如果它有100个内容项，它将为所有内容项指南针。并且通过position:relative，我们正在说“不要只停留在中心组件的底部。”

这是它最初的样子：

enter image description here

如果您通过ajax加载内容，则最初不会有滚动条。我只是将很多文本复制到其中，这就是最初有一个滚动条的原因。

点击按钮后：

enter image description here

如果有问题就警告我，希望有所帮助。

根据内容动态调整PrimeFaces中的中心布局单元

1 个答案: