当p：layout的fullPage设置为false时，在PrimeFaces模板中显示页脚 [英] Display footer in PrimeFaces template, when fullPage of p:layout is set to false
问题描述
< p：layout fullPage =false>
< p：layoutUnit position =northsize =135>
<！ - 把北内容放在这里，如果有 - >
< / p：layoutUnit>
< p：layoutUnit position =westsize =225header =菜单项collapsible =true>
<！ - 把西内容放在这里，如果有 - >
< / p：layoutUnit>
< p：layoutUnit position =centersize =2500maxSize =2500>
<！ - 把中心内容放在这里，如果有 - >
< / p：layoutUnit>
< p：layoutUnit position =eastsize =175>
<！ - 把东东放在这里，如果有 - >
< / p：layoutUnit>
< p：layoutUnit position =southsize =90>
<！ - 在这里放置南/页脚内容，如果有 - >
< / p：layoutUnit>
< / p：layout>
fullpage 时如何显示页脚设置为false？
EDIT： b
如果< p：layout> 的高度如下，
< p：layout fullPage =falsestyle =height：2000px;>
那么页脚显示在页面底部，基于 height CSS属性，但它仍然不是粘性页脚 - 它不会根据页面内容进行调整。
/ p>
为了更容易地想象你最终需要什么（并确认你对自己的需求），这里的SSCCE HTML / CSS解决方案（你显然是）要求。粘性页脚解决方案主要基于 Ryan Fait的方法（ min-height：100％和容器元素的负边距，覆盖除了页脚之外的所有东西），它不再支持IE6 / 7 $ c>：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; / *＃footer.height的负数* /
}
#header {
height：135px;
background：pink;
}
#menu {
float：left;
width：225px;
background：khaki;
}
#content {
margin-left：225px; / *与＃menu.width * /
相同margin-right：175px; / *与＃side.width * /
相同background：lemonchiffon;
padding：1px 1em; / *修复了p在div上的折叠边距，随意删除它* /
}
#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 =containerclass =clearfix>
< div id =header>标头< / div>
< div id =menu>菜单< / div>
< div id =side>侧< / div>
< div id =content>
< p>内容< / p>< p>内容< / p>< p>内容< / p>< p>内容< / p><
< / div>
< / div>
< div id =footer> Footer< / div>
< / body>
< / html>
注意：由于浮动的工作方式，< div id =side> （east unit）在要在之前放置的HTML标记中的所有非浮动元素< div id =content> （中心单位），否则将相对于最后一个非浮动元素的底部对齐。 / p>
现在，为了实现与< p：layout> 事情完全相同，相同的HTML结构，只有页脚仍然在容器内，东单位在中心单元之后，您需要确保没有任何一个布局单位是可折叠/可关闭/可调整大小（这些属性都已经默认为 false 因此为了简洁可以省略），并且在容器单元上应用PrimeFaces-builtin clearfix风格类 ui-helper-clearfix 以清除浮动（否则菜单，当屏幕垂直缩小时，内容和边会与页脚重叠）：
< p： layout styleClass =ui-helper-clearfix>
< p：layoutUnit position =northsize =135>
< p>标题< / p>
< / p：layoutUnit>
< p：layoutUnit position =westsize =225header =菜单项>
< p>菜单< / p>
< / p：layoutUnit>
< p：layoutUnit position =center>
< p>内容< / p>
< p>内容< / p>
< p>内容< / p>
< p>内容< / p>
< p>内容< / p>
< / p：layoutUnit>
< p：layoutUnit position =eastsize =175>
< p>侧< / p>
< / p：layoutUnit>
< p：layoutUnit position =southsize =90>
< p>页脚< / p>
< / p：layoutUnit>
< / p：layout>
然后，您可以在 PrimeFaces-覆盖样式表删除/覆盖所有不相关PrimeFaces生成的CSS （注意：！important 的确切目的是可以覆盖硬编码/ inline 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; / *页脚高度的负数。 * /
}
.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; / *菜单宽度加上面板之间的边距。 * /
margin-right：180px！important; / *面板宽度加上面板之间的边距。 * /
}
.ui-layout-east {
float：right;
margin：5px 0！important;
}
.ui-layout-container：after {
height：85px; / *页脚高度减去面板之间的边距。 * /
}
.ui-layout-south {
margin：5px！important;
visibility：visible！important;
}
最后添加以下脚本以移动边在内容（中心单元）之前，使得浮动块按照意图移动，并且将脚注移动到body的结尾，使得它在容器元素之外：
$（function（）{
$（。ui-layout-east）。insertBefore（。ui-layout-center）;
$ ui-layout-south）。appendTo（body）;
}）;
确保在使用
有了这个解决方案（我宁愿把它称为一个黑客，只是把它全部离开，去一个干净，干净的HTML / CSS解决方案，如果需要< p：panel> s而不是< div> 自动包含的 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模板中显示页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
