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

当在 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;">

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

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

更新：

如果在整个问题中将fullPage设置为false,则行为在PrimeFaces 5.3 final(社区发布)上保持不变.

解决方法

为了轻松可视化您最终需要的内容(并确认您对自己的需求),这里的SSCCE风格是您(显然)要求的纯HTML / CSS解决方案.粘性页脚解决方案主要基于 Ryan Fait’s approach(最小高度：100％和容器元素上的负余量,覆盖除页脚之外的所有内容),它不再支持IE6 / 7(由于：在伪选择器之后),特此简化HTML标记(不需要像

<!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结构,只有页脚仍然在容器内,而东单元在中心单元之后,你需要确保没有任何一个布局单元是可折叠/可关闭/可调整大小的(这些属性都是已经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,通过将固定偏移/维度的绝对定位设置回初始值/默认值来删除/覆盖这些布局单元上所有“无关”PrimeFaces生成的CSS属性(注意：确切的目的是！important是能够从真正的样式表覆盖硬编码/内联样式属性,在这种特殊情况下,只要您不想重写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;
}

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

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

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

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

https://stackoverflow.com/questions/22584920/display-footer-in-primefaces-template-when-fullpage-of-playout-is-set-to-false

本站文章除注明转载外，均为本站原创或编译
转载请明显位置注明出处：css – 当p：layout的fullPage设置为false时,在PrimeFaces模板中显示页脚

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

解决方法

猜你在找的CSS相关文章