0

I want to design a Layout and the footer should alway been display on the bottom on the page how can I set this with CSS. Here is the application now http://default-environment-wvg8irfup6.elasticbeanstalk.com/public/register.xhtml.

I use jsf 2.2 and primefaces 4.0

Here is the code

<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>
bvb1909
  • 191
  • 2
  • 6
  • 19
  • 1
    possible duplicate of [Position footer at bottom of page](http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page) – Hashem Qolami Mar 10 '14 at 22:02
  • Did you mean you want it to always display at the bottom of the browser window, regardless of if there is more content left to scroll down to? I may have misunderstood your question... – Chris Mukherjee Mar 10 '14 at 22:08
  • yes always on the bottom – bvb1909 Mar 10 '14 at 22:10

2 Answers2

0

Add CSS properties

position:absolute;
bottom:0px;

to your footer.

Chris Mukherjee
  • 841
  • 9
  • 25
  • I find the problem, the attribute position: absolute is been disabled by the browser here is a picture https://www.dropbox.com/s/qwbbxbf952ybp1u/footer.JPG – bvb1909 Mar 10 '14 at 22:41
  • It's at the bottom of the page for me in Chrome, with position:absolute and bottom:0px – Chris Mukherjee Mar 11 '14 at 00:16
0

In my case, I also had to add to the body section height: 100%

My css looks like:

html {
  height: 100%
}
body {
  height: 100%
}
.my_footer {
position: absolute;
bottom: 0 px;
}
Piotr
  • 510
  • 6
  • 8