css - 在底部显示页脚

Question

我想设计一个布局，页脚应该始终显示在页面底部，如何使用 CSS 设置它。这是现在的应用http://default-environment-wvg8irfup6.elasticbeanstalk.com/public/register.xhtml .

我使用 jsf 2.2 和 primefaces 4.0

这是代码

<f:view>
        <f:metadata>
            <ui:insert name="metadata" />
        </f:metadata>

        <h:outputStylesheet library="css" name="template.css" />
        <p:layout fullPage="true">

            <p:layoutUnit styleClass="ui-widget-header" position="north" size="110">
                <p:layout height="140">
                    <p:layoutUnit position="west" width="180" height="140">
                        <p:graphicImage library="images" name="Logo_0.3.png" height="90" width="170" />
                    </p:layoutUnit>

                    <p:layoutUnit position="center">
                        <ui:insert name="header">
                            <ui:include src="/META-INF/templates/templateMenubar.xhtml" />
                        </ui:insert>
                    </p:layoutUnit>
                </p:layout>
            </p:layoutUnit>

            <p:layoutUnit styleClass="content" position="center">
                <h1>
                    <ui:insert name="title">
                        <h:outputText value="Default Title" />
                    </ui:insert>
                </h1>
                <ui:insert name="content">
                    <ui:include src="/META-INF/templates/templateContent.xhtml" />
                </ui:insert>
            </p:layoutUnit>

            <p:layoutUnit styleClass="ui-widget-header" position="south" size="60">
                <p:layout styleClass="footerpic" height="100">
                    <p:layoutUnit position="center">
                    </p:layoutUnit>

                    <p:layoutUnit styleClass="footerpic" position="east" width="300" height="80">
                        <h:graphicImage styleClass="footerpic" library="images" name="MFMNeu.png" height="25"
                            width="25" />
                    </p:layoutUnit>
                </p:layout>
            </p:layoutUnit>

        </p:layout>
    </f:view>

Answer 1

添加 CSS 属性

position:absolute;
bottom:0px;

到您的页脚。