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

页脚不显示(实际上是错误地显示在页面顶部)，当fullPage在PrimeFaces模板中设置为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最终版(社区版本)中，当fullPage被设置为false时，行为保持不变，正如前面整个问题所述。

为了方便地可视化您最终需要什么(并为自己确认您的需求)，这里有一个SSCCE风格的纯HTML/CSS解决方案，用于您(显然)要求的内容。粘页脚解决方案主要基于Ryan Fait的方法(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">("东部单位")在HTML标记中必须将放在所有非浮动元素的前面，在同一"行"，如<div id="content">("中心单位")，否则它将相对于最后一个非浮动元素的底部对齐。

现在，为了实现与<p:layout>完全相同的东西，基本上呈现几乎相同的HTML结构，只有页脚仍然在容器内，东部单元在中心单元之后，你需要确保没有一个布局单元是可折叠/可关闭/可调整大小的(这些属性都已经默认为false，因此为了简洁可以省略)，并且你在容器单元上应用了primefaces内置的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样式表中应用以下CSS，通过将固定偏移量/尺寸的绝对定位设置回初始/默认值，来删除/覆盖所有"不相关"的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;
}

最后添加以下脚本，以便将边(东部单元)移动到内容(中心单元)之前，以便浮动按照预期进行，并将页脚移动到body的末尾，使其位于容器元素的外部:

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

确保在同一视图上使用@all进行ajax更新时重新执行此脚本，因为某些原因(这本身就是一个坏主意)。

有了这个"解决方案"(我宁愿称之为黑客，只是把它扔掉，去一个理智和干净的HTML/CSS解决方案，如果有必要用<p:panel> s而不是<div> s)，它仍然有些脆弱;自动包含的layout.js脚本在每次窗口调整大小时自动调整布局单位。但到目前为止，他们似乎没有打破任何在所有现代浏览器我尝试(IE>8)。

这可能是也可能不是PrimeFaces的bug -您最好在那里询问。如果你检查源，布局实际上是在你的页面上，但是它的位置在标题上方，可能是因为它不知道它在哪里。在一个完整的页面中，它知道由页面生成的位置，但除此之外，它可以在您想要的任何位置。尝试使用CSS来移动它等，参考。并使用styleClass等附加类，我的hack只是使用!important，你真的不应该这样做。

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

等。

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

我已经创建了一个关于PF的问题报告，希望有人能提供更多关于这个问题的信息。

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

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

从PrimeFaces Extensions <pe:layout>学习，在页面加载时JavaScript警告框中出现以下错误，

/UI布局初始化警告布局容器DIV#mainForm:fullPage没有高度。因此布局是零身高，因此"隐形"!

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

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

_{很难判断这是故意的还是故意的。}

如果有人能揭露如何根据页面内容调整页脚，这将是令人愉快的，一个粘性页脚。

确保布局div具有相对高度:

1_ BODY和layout之间的每个组件必须有一个相对高度，应该是100%。

2_ BODY和layout之间总是使用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扩展库的布局，它更稳定，一个工作模板可以在这里找到erp.agitech.net admin/pass

相关内容

最新更新

热门标签：