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;

到你的页脚。

Answer 2

就我而言，我还必须在正文部分添加高度：100％

我的CSS看起来像：

html {
  height: 100%
}
body {
  height: 100%
}
.my_footer {
position: absolute;
bottom: 0 px;
}

底部显示页脚

2 个答案: