clearfix

clearfix

关注
发信
关注(28)粉丝(399)

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

本文介绍了当 p:layout 的 fullPage 设置为 false 时，在 PrimeFaces 模板中显示页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当 .

<p:layoutUnit position="north" size="135"><!--如果有的话，把北方的内容放在这里--></p:layoutUnit><p:layoutUnit position="west" size="225" header="Menu Item" collapsible="true"><!--如果有的话，把西方的内容放在这里--></p:layoutUnit><p:layoutUnit position="center" size="2500" maxSize="2500"><!--如果有的话，把中心内容放在这里--></p:layoutUnit><p:layoutUnit position="east" size="175"><!--如果有的话，把东方的内容放在这里--></p:layoutUnit><p:layoutUnit position="south" size="90"><!--将南/页脚内容放在这里，如果有的话--></p:layoutUnit></p:layout>

当fullpage设置为false时，如何显示页脚?

如果 被赋予如下高度，

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

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

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

更新:

行为在 PrimeFaces 5.3 final(社区发布)，当 fullPage 设置为 false 时，如前面在整个问题中所述.

解决方案

为了轻松地可视化您最终需要什么(并确认您自己的需求)，这里是 SSCCE 风格的纯 HTML/CSS 解决方案(显然)要求.粘性页脚解决方案主要基于 Ryan Fait 的方法(min-height:100% 和容器元素上的负边距，它覆盖了除页脚之外的所有内容)，它只是不再支持 IE6/7(由于 :after 伪选择器)，从而简化了 HTML 标记(不需要像 <div id="pushfooter"> 这样的非语义混乱).注意:背景颜色纯粹是为了可视化.

<html lang="zh-cn"><头><title>堆栈溢出问题 22584920</title><风格>html，正文{高度:100%；最小宽度:800px；边距:0；}#容器 {最小高度:100%；边距:0 自动 -90px；/* #footer.height 的负数 */}#header {高度:135px；背景:粉红色；}#菜单 {向左飘浮;宽度:225px；背景:卡其色；}#内容 {左边距:225px；/* 与#menu.width 相同 */右边距:175px；/* 与#side.width 相同 */背景:柠檬雪纺；填充:1px 1em；/* 修复了 div 上 p 的折叠边距，可以随意删除它 */}#边 {浮动:对；宽度:175px；背景:淡绿色；}#footer, #container:after {高度:90px；}#页脚{背景:橙色；}.clearfix:后{显示:块；内容: " ";清楚:两者；}</风格><身体><div id="container" class="clearfix"><div id="header">页眉</div><div id="菜单">菜单</div><div id="side">Side</div><div id="内容"><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>

<div id="footer">页脚</div>

注意:由于浮动的工作方式，<div id="side">(东单位")在 HTML 标记中被置于 之前 同一行"的所有非浮动元素，如

(中心单元")，否则会相对对齐到最后一个非浮动元素的底部.

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

<p:layout styleClass="ui-helper-clearfix"><p:layoutUnit position="north" size="135"><p>标题</p></p:layoutUnit><p:layoutUnit position="west" size="225" header="Menu Item"><p>菜单</p></p:layoutUnit><p:layoutUnit position="center"><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p></p:layoutUnit><p:layoutUnit position="east" size="175"><p>侧面</p></p:layoutUnit><p:layoutUnit position="south" size="90"><p>页脚</p></p:layoutUnit></p:layout>

然后你可以在你的 PrimeFaces-override 样式表，通过将具有固定偏移量/尺寸的绝对定位设置回初始/默认值(注意:确切的!important 的目的是能够从真正的样式表上覆盖硬编码/内联 style 属性，在这种特殊情况下，只要您不这样做，就没有其他选择想重写 PrimeFaces 组件和渲染器).关键是你应该得到与 SSCCE 完全相同的 HTML/CSS(默认值):

html, body {高度:100%；最小宽度:800px；边距:0；}.ui-布局-容器{最小高度:100%；高度:自动！重要；边距:5px；底边距:-90px；/* 页脚高度的负数.*/}.ui-layout-unit {位置:静态！重要；顶部:自动！重要；底部:自动！重要；左:自动！重要；正确:自动！重要；高度:自动！重要；}.ui-layout-unit-content {显示:阻止！重要；高度:自动！重要；}.ui-layout-west {向左飘浮;边距:5px 0 ！重要；}.ui-布局中心{边距:5px 0 ！重要；margin-left: 230px !important;/* 菜单宽度加上面板之间的边距.*/margin-right: 180px !important;/* 边宽加上面板之间的边距.*/}.ui-布局-东{浮动:对；边距:5px 0 ！重要；}.ui-layout-container:after {高度:85px；/* 页脚高度减去面板之间的边距.*/}.ui-布局-南{边距:5px！重要；可见性:可见！重要；}

最后添加以下脚本，以便在内容(中心单元)之前移动侧面(东单元)，使浮动按预期移动，并将页脚移动到正文的末尾，使其在内容(中心单元)之外容器元素:

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

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

有了这个解决方案"(我宁愿称其为黑客，然后将其全部扔掉，然后寻求一个健全和干净的 HTML/CSS 解决方案，如有必要，使用 <p:panel>s 而不是

s)，还是有点脆弱；自动包含的 layout.js 脚本会在每个窗口调整大小时自动调整布局单位.但到目前为止，它们似乎并没有在我尝试过的所有现代浏览器中破坏任何东西(IE>8).

Footer is not displayed (actually, it is incorrectly displayed on top of the page), when fullPage is set to false in PrimeFaces template.

<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>

How to display footer, when fullpage is set to false?

EDIT :

if <p:layout> is given a height like as follows,

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

then the footer is displayed at the bottom of the page based on the value of the height CSS attribute but it is still not a sticky footer - it does not adjust according to the page contents.

So, Is there a way to make it sticky?

Update :

The behaviour remains stationary on PrimeFaces 5.3 final (community release), when fullPage is set to false as said previously throughout the question.

解决方案

To easily visualize what you ultimately need (and to confirm your needs for myself), here's in SSCCE flavor a pure HTML/CSS solution of what you're (apparently) asking for. The sticky footer solution is largely based on Ryan Fait's approach (a min-height:100% and a negative margin on the container element which covers everything but footer), it only doesn't support IE6/7 anymore (due to :after pseudoselector), hereby simplifying the HTML markup (no non-semantic clutter like <div id="pushfooter"> needed). Note: background colors are purely for visualization.

<!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>

Note: due to the way how floats work, the <div id="side"> (the "east unit") has in the HTML markup to be placed before all non-floating elements at the same "row", such as the <div id="content"> (the "center unit"), otherwise it will be aligned relative to the bottom of the last non-floating element.

Now, in order to achieve exactly the same with the <p:layout> thing, which basically renders almost the same HTML structure, only with the footer still inside the container and the east unit after the center unit, you need to make sure that no one of the layout units are collapsible/closable/resizable (those attributes all already default to false and can thus be omitted for brevity) and that you apply the PrimeFaces-builtin clearfix style class ui-helper-clearfix on the container unit to clear the floats (otherwise the menu, content and side would overlap the footer when the screen is shrunk vertically):

<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>

Then you can apply the following CSS in your PrimeFaces-override stylesheet to remove/override all "irrelevant" PrimeFaces-generated CSS properties on those layout units by setting the absolute positioning with fixed offsets/dimensions back to initial/default values (note: the exact purpose of !important is being able to override hardcoded/inline style properties from a true stylesheet on, there's in this particular case simply no other option as long as you don't want to rewrite PrimeFaces components and renderers). Key point is that you should end up with exactly the same HTML/CSS (defaults) as the SSCCE:

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

And finally add the following script in order to move the side (east unit) before the content (center unit), so that the floats go as intented, and to move the footer to end of body, so that it's outside the container element:

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

Make sure that this script is re-executed when you do an ajax update with @all on the same view for some reason (which is at its own a bad idea though).

With this "solution" (I'd rather call it a hack and just throw it all away and go for a sane and clean HTML/CSS solution, if necessary with <p:panel>s instead of <div>s), it's still somewhat brittle; the auto-included layout.js script auto-adjusts the layout units on every window resize. But so far they don't seem to break anything in all modern browsers I tried (IE>8).

这篇关于当 p:layout 的 fullPage 设置为 false 时，在 PrimeFaces 模板中显示页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-28 06:00
Powered by LMLPHP ©2024 clearfix 0.037144