Display Footer on Bottom - css

Question

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>

Answer 1

Add CSS properties
position:absolute;
bottom:0px;
to your footer.

Answer 2

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;
}