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

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

css jsf primefaces

Css 当p:layout的fullPage设置为false时，在PrimeFaces模板中显示页脚,css,jsf,primefaces,jsf-2.2,sticky-footer,Css,Jsf,Primefaces,Jsf 2.2,Sticky Footer,当中的fullPage设置为false时，页脚不显示（实际上，页脚不正确地显示在页面顶部）然后，页脚将根据heightCSS属性的值显示在页面底部，但它仍然不是粘性页脚-它不会根据页面内容进行调整那么，有没有办法让它粘起来更新：当fullPage设置为false时，行为保持不变（社区发布）。这可能是PrimeFaces中的一个bug，也可能不是，最好在那里提问。如果您检查源代码，布局实际上在您的页面上，但是它的位置在页眉上方，很可能是因为它不知道它要放在哪里。在整个页面中，它知道由页面

当中的

fullPage

设置为false时，页脚不显示（实际上，页脚不正确地显示在页面顶部）

然后，页脚将根据

height

CSS属性的值显示在页面底部，但它仍然不是粘性页脚-它不会根据页面内容进行调整

那么，有没有办法让它粘起来

更新：

当

fullPage

设置为

false

时，行为保持不变（社区发布）。

这可能是PrimeFaces中的一个bug，也可能不是，最好在那里提问。如果您检查源代码，布局实际上在您的页面上，但是它的位置在页眉上方，很可能是因为它不知道它要放在哪里。在整个页面中，它知道由页面生成的位置，但在其他情况下，它可能位于您希望它位于的任何位置。尝试使用CSS移动它，等等。使用

styleClass

等来附加类，我的技巧就是使用

！重要信息

，您不应该这样做

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

等等

虽然我更倾向于认为这是一个bug，因为没有一个CSS被正确地应用于它

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

显然需要适当的高度，当

fullPage

设置为

false

时。在适当的位置显示页脚（应位于浏览器窗口的底部）需要高度，如

很难说这是故意的还是故意的

如果有人能够展示如何根据页面内容调整页脚，这将是一件令人愉快的事情，一个粘性的页脚。为了确保布局DIV具有相对高度：

1_uu车身和布局之间的每个部件必须有一个相对高度，该高度应为100%

2_uu在主体和布局之间始终使用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>

我还建议您，要使用PF扩展库的布局，它更稳定，可以在这里找到一个工作模板admin/pass

，以便轻松地可视化您最终需要的内容（并确认您自己的需要），这里是一个纯HTML/CSS解决方案，满足您（显然）的需求。粘性页脚解决方案主要基于（一个

最小高度：100%

和容器元素上的一个负边距，它覆盖除页脚以外的所有内容），它不再支持IE6/7（由于

：在伪选择器之后），从而简化HTML标记（不需要像
这样的非语义混乱）。注：背景色仅用于可视化

堆栈溢出问题22584920
html，正文{
身高：100%；
最小宽度：800px；
保证金：0；
}
#容器{
最小高度：100%；
页边距：0自动-90px；/*页脚高度的负数*/
}
#标题{
高度：135px；
背景：粉红色；
}
#菜单{
浮动：左；
宽度：225px；
背景：卡其色；
}
#内容{
左边距：225px；/*与#menu.width相同*/
右边距：175px；/*与#side.width相同*/
背景：柠檬花；
填充：1px 1em；/*修复了div上p的折叠边，可以随意移除*/
}
#侧面{
浮动：对；
宽度：175px；
背景：淡绿色；
}
#页脚，#容器：后面{
高度：90px；
}
#页脚{
背景：橙色；
}
.clearfix:之后{
显示：块；
内容：“；
明确：两者皆有；
}
标题
菜单
一边
内容
内容
内容
内容
内容
页脚

注意：由于浮动的工作方式，HTML标记中的
（“东单位”）必须放在同一“行”的所有非浮动元素之前，例如
（“中心单位”），否则它将相对于最后一个非浮动元素的底部对齐
现在，为了实现与
完全相同的效果，它基本上呈现了几乎相同的HTML结构，只是页脚仍在容器中，而东部单元位于中心单元之后，您需要确保没有任何布局单元是可折叠/可关闭/可调整大小的（这些属性都已设置为false
，因此为了简洁起见可以省略），并且您可以在容器单元上应用clearfix样式类ui助手clearfix中内置的PrimeFaces来清除浮动（否则，当屏幕垂直收缩时，菜单、内容和侧边将与页脚重叠）：

标题
菜单
内容
内容
内容
内容
内容
侧面
页脚

然后，通过将带有固定偏移量/尺寸的绝对位置设置回初始值/默认值，您可以在布局单元中应用以下CSS来删除/覆盖所有“不相关”的PrimeFaces生成的CSS属性（注意：！important
的确切目的是能够从真正的样式表中重写硬编码/内联样式属性。）
.ui-layout-pane-south {
    top: 200px !important;
}

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

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

<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();
                });
            }
        }
    }
});

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