Question

在PrimeFaces template中将fullPage设置为false时，不显示页脚（实际上，它在页面顶部显示不正确）。

<p:layout fullPage="false">
    <p:layoutUnit position="north" size="135">
        <!--Put north content here, if any-->
    </p:layoutUnit>

    <p:layoutUnit position="west" size="225" header="Menu Item" collapsible="true">
        <!--Put west content here, if any-->
    </p:layoutUnit>

    <p:layoutUnit position="center" size="2500" maxSize="2500">
        <!--Put center content here, if any-->
    </p:layoutUnit>

    <p:layoutUnit position="east" size="175">
        <!--Put east content here, if any-->
    </p:layoutUnit>

    <p:layoutUnit position="south" size="90">
        <!--Put south/footer content here, if any-->
    </p:layoutUnit>
</p:layout>

如果fullpage设置为false，如何显示页脚？

编辑：

如果<p:layout>的高度如下所示，

<p:layout fullPage="false" style="height: 2000px;">

然后页脚会根据height CSS属性的值显示在页面底部，但是它仍然不是粘性页脚 - 它不会根据页面内容。

那么，有没有办法让它变得粘稠？

更新：

行为在PrimeFaces 5.3 final（社区发布）上保持不变，当fullPage设置为false时，如前所述。

Answer 1

为了方便地查看您最终需要的内容（以及确认您对自己的需求），SSCCE中的一个纯粹的HTML / CSS解决方案就是您（显然）所要求的。粘性页脚解决方案主要基于Ryan Fait's approach（一个min-height:100%和容器元素上的负边距，覆盖了除页脚之外的所有内容），它只是不再支持IE6 / 7（由于:after伪选择器），特此简化HTML标记（不需要像<div id="pushfooter">那样的非语义混乱）。注意：背景颜色纯粹是为了可视化。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Stack Overflow Question 22584920</title>
        <style>
            html, body {
                height: 100%;
                min-width: 800px;
                margin: 0;
            }
            #container {
                min-height: 100%;
                margin: 0 auto -90px; /* Negative of #footer.height */
            }
            #header {
                height: 135px;
                background: pink;
            }
            #menu {
                float: left;
                width: 225px;
                background: khaki;
            }
            #content {
                margin-left: 225px; /* Same as #menu.width */
                margin-right: 175px; /* Same as #side.width */
                background: lemonchiffon;
                padding: 1px 1em; /* Fixes collapsing margin of p's on div, feel free to remove it */
            }
            #side {
                float: right;
                width: 175px;
                background: palegreen;
            }
            #footer, #container:after {
                height: 90px;
            }
            #footer {
                background: orange;
            }
            .clearfix:after {
                display: block;
                content: " ";
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="container" class="clearfix">
            <div id="header">Header</div>
            <div id="menu">Menu</div>
            <div id="side">Side</div>
            <div id="content">
                <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
            </div>
        </div>
        <div id="footer">Footer</div>
    </body>
</html>

注意：由于浮动的工作方式，<div id="side">（＆＃34;东部单位＆＃34;）在HTML标记中有之前所有非浮动元素在同一行＆＃34;行＆＃34;，例如<div id="content">（＆＃34;中心单位＆＃34;），否则它将相对于最后一个非浮动的底部对齐元件。

现在，为了与<p:layout>事物完全相同，基本上呈现几乎相同的HTML结构，只有页脚仍然在容器内，东部单元在中心单元之后，你需要确保没有任何一个布局单元是可折叠/可关闭/可调整大小的（这些属性都已default到false，因此可以省略）以及您应用PrimeFaces-builtin clearfix样式类容器单元上的ui-helper-clearfix用于清除浮动（否则当屏幕垂直收缩时，菜单，内容和侧面将与页脚重叠）：

<p:layout styleClass="ui-helper-clearfix"> <p:layoutUnit position="north" size="135"> <p>Header</p> </p:layoutUnit> <p:layoutUnit position="west" size="225" header="Menu Item"> <p>Menu</p> </p:layoutUnit> <p:layoutUnit position="center"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </p:layoutUnit> <p:layoutUnit position="east" size="175"> <p>Side</p> </p:layoutUnit> <p:layoutUnit position="south" size="90"> <p>Footer</p> </p:layoutUnit> </p:layout>

然后，您可以在PrimeFaces-override stylesheet中应用以下CSS来删除/覆盖所有＆＃34;无关的＆＃34;通过将固定偏移/维度的绝对定位设置回初始值/默认值，PrimeFaces在这些布局单元上生成CSS属性（注意：!important的确切用途是能够覆盖硬编码/内联style来自真实样式表的属性，在这种特殊情况下，只要您不想重写PrimeFaces组件和渲染器就没有其他选项。关键是你最终应该得到与SSCCE完全相同的HTML / CSS（默认值）：

html, body { height: 100%; min-width: 800px; margin: 0; } .ui-layout-container { min-height: 100%; height: auto !important; margin: 5px; margin-bottom: -90px; /* Negative of footer height. */ } .ui-layout-unit { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; height: auto !important; } .ui-layout-unit-content { display: block !important; height: auto !important; } .ui-layout-west { float: left; margin: 5px 0 !important; } .ui-layout-center { margin: 5px 0 !important; margin-left: 230px !important; /* Menu width plus margin between panels. */ margin-right: 180px !important; /* Side width plus margin between panels. */ } .ui-layout-east { float: right; margin: 5px 0 !important; } .ui-layout-container:after { height: 85px; /* Footer height minus margin between panels. */ } .ui-layout-south { margin: 5px !important; visibility: visible !important; }

最后添加以下脚本以便在内容（中心单位）之前移动侧面（东单位），以便浮动按照意图移动，并将页脚移动到正文的末尾，以便它＃39 ; s在容器元素之外：

$(function() { $(".ui-layout-east").insertBefore(".ui-layout-center"); $(".ui-layout-south").appendTo("body"); });

确保在由于某种原因在同一视图上使用@all执行ajax更新时重新执行此脚本（但这本身就是一个坏主意）。

使用这个＆＃34;解决方案＆＃34; （我宁可把它称为hack，只需将它全部扔掉，然后选择一个理智而干净的HTML / CSS解决方案，如果需要，使用<p:panel>而不是<div> s），它＆＃ 39; s仍然有些脆弱;自动包含的layout.js脚本会在每个窗口调整大小时自动调整布局单位。但到目前为止，他们似乎并没有在我尝试的所有现代浏览器中破坏任何东西（IE＆gt; 8）。

Answer 2

这可能是也可能不是PrimeFaces中的错误 - 您最好在那里询问。如果您检查来源，布局实际上在您的页面上，但是它的位置在标题之上，可能是因为它不知道它在哪里。在整页中，它知道页面生成的位置，但是它可以是您想要的任何位置。尝试使用CSS移动它等refer to。并使用styleClass等附加类，我的黑客只是使用你不应该做的!important。

.ui-layout-pane-south {
    top: 200px !important;
}

等。

虽然我更倾向于认为这是一个错误，因为没有一个CSS正确应用于它。

我已在PF上创建issue report，希望有人可以提供有关此问题的更多信息。

Answer 3

当fullPage设置为false时，显然<p:layout>需要适当的高度。需要高度才能在适当的位置显示页脚（它应该位于浏览器窗口的底部），例如，

<p:layout fullPage="false" style="height: 2000px;">

从PrimeFaces Extensions <pe:layout>了解到，无法在页面加载时在JavaScript警告框中处理以下错误，

/ UI布局初始化警告布局容器 “DIV＃mainForm：fullPage”没有高度。因此布局是 0高度因此'看不见'！

如果fullPage <pe:layout>设置为false 且高度未定义。为了使其正常工作，它需要一个合适的高度，如下所示。

<pe:layout id="fullPage" 
           fullPage="false" 
           style="height: 2000px;" 
           stateCookie="true">

_{很难说是故意的还是故意的。}

如果有人可以根据页面内容（粘性页脚）公开如何调整页脚，那将是令人愉快的。

Answer 4

确保布局DIV具有相对高度：

1_ BODY和布局之间的每个组件都必须有相对高度，这应该是100％。

2_在BODY和布局之间始终使用DIV而不是SPAN（没有内联元素）。

例如：

<body>
<h:panelGroup layout="block***important***" style="height:100%" >
    <pe:layout widgetVar="pageLayoutWV" fullPage="false" style="height:100%" > 
    </pe:layout>
</h:panelGroup>
</body>

万一，它可以将这段代码添加到您的页面中，（我很久以前修好了，但它可能与您的问题有关系）：

function BaseWidgetInit(cpn, cfg) {
    cpn.cfg = cfg;
    cpn.id = cfg.id;
    cpn.jqId = PrimeFaces.escapeClientId(cpn.id),
    cpn.jq = $(cpn.jqId);           
    //remove script tag
    $(cpn.jqId + '_s').remove();
}   
if (PrimeFaces.widget.Layout)
PrimeFaces.widget.Layout = PrimeFaces.widget.Layout.extend({
    init: function(cfg) {
        BaseWidgetInit(this, cfg);        
        this.cfg = cfg;
        this.id = this.cfg.id;
        this.jqId = PrimeFaces.escapeClientId(this.id);
        if(this.cfg.full) {                                                 //full
            this.jq = $('body');
        } else if(this.cfg.parent) {                                        //nested
            this.jq = $(PrimeFaces.escapeClientId(this.cfg.parent));
        } else {                                                            //element
            this.jq = $(this.jqId);
            this.jq.css('height', $(window).height()-10);
        }        
        var _self = this;
        $(this.jq).data("layoutContainer", null);
        $(this.jq).data("layout", null);
        if(this.jq.is(':visible')) {
            this.render();
        } 
        else {
            var hiddenParent = this.jq.parents('.ui-hidden-container:first'),
            hiddenParentWidget = hiddenParent.data('widget');

            if(hiddenParentWidget && hiddenParentWidget.addOnshowHandler) {
                hiddenParentWidget.addOnshowHandler(function() {  
                    return _self.render();
                });
            }
        }
    }
});

我还建议你，使用PF Extention库的布局，它更稳定，可以在这里找到一个工作模板erp.agitech.net admin / pass

当p：layout的fullPage设置为false时，在PrimeFaces模板中显示页脚

4 个答案: