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