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

Question

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

Tin*_*iny 3 css jsf sticky-footer primefaces jsf-2.2

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>

Run Code Online (Sandbox Code Playgroud)

如何显示页脚,何时fullpage设置为false？

编辑:

如果<p:layout>给出如下的高度,

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

Run Code Online (Sandbox Code Playgroud)

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

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

更新:

这个行为在PrimeFaces 5.3 final(社区发布)中保持不变,当在整个问题中fullPage设置false为如前所述时.

Answer 1

Bal*_*usC 7

为了轻松可视化您最终需要的内容(并确认您对自己的需求),这里的SSCCE风格是您(显然)要求的纯HTML/CSS解决方案.粘性页脚解决方案很大程度上基于Ryan Fait的方法(a 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>

Run Code Online (Sandbox Code Playgroud)

注意:由于浮点数的工作方式,<div id="side">("东单位")在HTML标记中放置在同一"行"的所有非浮动元素之前,例如<div id="content">("中心单位"),否则它将相对于最后一个非浮动元素的底部对齐.

现在,为了实现完全相同的<p:layout>东西,它基本上呈现几乎相同的HTML结构,只有页脚仍然在容器内,而东单元在中心单元之后,你需要确保没有任何一个布局单位是可折叠/可关闭/可调整大小的(这些属性都已默认为false,因此可以省略)并且您ui-helper-clearfix在容器单元上应用PrimeFaces-builtin 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>

Run Code Online (Sandbox Code Playgroud)

然后,您可以在PrimeFaces覆盖样式表中应用以下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;
}

Run Code Online (Sandbox Code Playgroud)

最后添加以下脚本以便在内容(中心单元)之前移动侧面(东单元),以便浮动按照意图移动,并将页脚移动到主体的末尾,以便它在容器元素之外:

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

Run Code Online (Sandbox Code Playgroud)

当@all出于某种原因在同一视图上执行ajax更新时,请确保重新执行此脚本(但这本身就是一个坏主意).

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

归档时间：	11 年，7 月前
查看次数：	10807 次
最近记录：	8 年，4 月前