title: Display Footer on Bottom
body: <p>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  <a href="http://default-environment-wvg8irfup6.elasticbeanstalk.com/public/register.xhtml" rel="nofollow">http://default-environment-wvg8irfup6.elasticbeanstalk.com/public/register.xhtml</a>.</p>
  
  <p>I use jsf 2.2 and primefaces 4.0</p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;f:view&gt;
          &lt;f:metadata&gt;
              &lt;ui:insert name="metadata" /&gt;
          &lt;/f:metadata&gt;
  
          &lt;h:outputStylesheet library="css" name="template.css" /&gt;
          &lt;p:layout fullPage="true"&gt;
  
              &lt;p:layoutUnit styleClass="ui-widget-header" position="north" size="110"&gt;
                  &lt;p:layout height="140"&gt;
                      &lt;p:layoutUnit position="west" width="180" height="140"&gt;
                          &lt;p:graphicImage library="images" name="Logo_0.3.png" height="90" width="170" /&gt;
                      &lt;/p:layoutUnit&gt;
  
                      &lt;p:layoutUnit position="center"&gt;
                          &lt;ui:insert name="header"&gt;
                              &lt;ui:include src="/META-INF/templates/templateMenubar.xhtml" /&gt;
                          &lt;/ui:insert&gt;
                      &lt;/p:layoutUnit&gt;
                  &lt;/p:layout&gt;
              &lt;/p:layoutUnit&gt;
  
              &lt;p:layoutUnit styleClass="content" position="center"&gt;
                  &lt;h1&gt;
                      &lt;ui:insert name="title"&gt;
                          &lt;h:outputText value="Default Title" /&gt;
                      &lt;/ui:insert&gt;
                  &lt;/h1&gt;
                  &lt;ui:insert name="content"&gt;
                      &lt;ui:include src="/META-INF/templates/templateContent.xhtml" /&gt;
                  &lt;/ui:insert&gt;
              &lt;/p:layoutUnit&gt;
  
              &lt;p:layoutUnit styleClass="ui-widget-header" position="south" size="60"&gt;
                  &lt;p:layout styleClass="footerpic" height="100"&gt;
                      &lt;p:layoutUnit position="center"&gt;
                      &lt;/p:layoutUnit&gt;
  
                      &lt;p:layoutUnit styleClass="footerpic" position="east" width="300" height="80"&gt;
                          &lt;h:graphicImage styleClass="footerpic" library="images" name="MFMNeu.png" height="25"
                              width="25" /&gt;
                      &lt;/p:layoutUnit&gt;
                  &lt;/p:layout&gt;
              &lt;/p:layoutUnit&gt;
  
          &lt;/p:layout&gt;
      &lt;/f:view&gt;
  </code></pre>