个人中心
gpt4 book ai didi

css - 在 PrimeFaces 模板中显示页脚，当 p :layout is set to false 的全页时

转载 作者：行者123 更新时间：2023-11-28 09:03:14 25 4
gpt4 key购买 nike

当 fullPage 时，页脚未显示(实际上，它错误地显示在页面顶部)在 PrimeFaces template 中设置为 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设置为假？

编辑:

如果<p:layout>被赋予如下高度，

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

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

那么，有没有什么办法让它变粘呢？

更新:

行为在 PrimeFaces 5.3 final 上保持静止(社区发布)，当 fullPage设置为 false正如之前在整个问题中所说的那样。

最佳答案

为了轻松地可视化您最终需要的东西(并为我自己确认您的需求)，这里有一个 SSCCE 风格的纯 HTML/CSS 解决方案，可以满足您(显然)的要求。粘性页脚解决方案主要基于 Ryan Fait's approach (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>

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

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

<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 的确切目的是能够覆盖硬编码/在真正的样式表中内联 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;
}

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

$(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)。

关于css - 在 PrimeFaces 模板中显示页脚，当 p :layout is set to false 的全页时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22584920/

25 4 0
文章推荐： json - 使用原生 swift 解析返回的 Json
文章推荐： php - 如何在页面加载后立即提交表单
文章推荐： ios - 在 Haneke 和 SwiftyJSON 之间转换 JSON
文章推荐： ios - 从 Facebook 获取照片
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com