Floating Footer page layout in ADF

There was a request from a friend about a typical page layout this morning. In a page, there is the usual header, center area and the footer. The header and footer are of fixed height and the center is of variable height.

The requirement is: if the center area contain too many components, the footer should slide down. But if the centre area doesn't contain anything, the footer shouldnot squeeze into the header, it should stay at the bottom of the page.

For example, lets say the browser height is of 700px and both the header and footer are of 100px each. So now lets say the center area is of 800px, then a scrollbar appears on the page. But if the center is of only 300px,(making the whole content to be of 100+100+300=500px), then the footer should not come up towards the middle of the page, it should stay at the end of the page and the center area should show all its contents with the required space towards the end.

Solution: After wasting some time on a panelStretchLayout, i decided to go with the panelBorderLayout and some javascript. I am using a trick here to insert a spacer on the "start" facet of the panelBorderLayout. This spacer height is set using javascript on load of the page to get the required height of the center area when there are fewer components.
Below is the jspx source:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
  <af:clientListener method="onDocLoad" type="load"/>
  <af:form id="f1">
    <af:panelGroupLayout id="pgl1" halign="left" valign="top"
                         layout="scroll">
      <af:panelBorderLayout id="pbl1">
        <f:facet name="start">
          <af:spacer width="10" height="10" id="dch1"
                     clientComponent="true"/>
        </f:facet>
        <f:facet name="bottom">
          <af:panelGroupLayout id="panelGroupLayout2" halign="left"
                               valign="top" layout="vertical"
                               inlineStyle="border-color:Black; border-width:2px; border-style:solid; height:100.0px;"/>
        </f:facet>
        <f:facet name="end"/>
        <f:facet name="top">
          <af:panelGroupLayout id="panelGroupLayout1" halign="left"
                               valign="top" layout="vertical"
                               inlineStyle="border-color:Black; border-width:2px; border-style:solid; height:100.0px;"/>
        </f:facet>
        <af:panelGroupLayout id="pgl2" layout="vertical" halign="left"
                             valign="top">
          <af:commandButton text="commandButton 1" id="cb1"/>
        </af:panelGroupLayout>
      </af:panelBorderLayout>
    </af:panelGroupLayout>
  </af:form>
  <af:resource type="javascript">
    function onDocLoad(){
      var defScrWidthComp = document.getElementById('dch1');
      var h = getWindowHeight();
      h = parseInt(parseInt(h) - parseInt(200));
      defScrWidthComp.style.height = h+'px';
    }

    function getWindowHeight() {
      var myHeight = 0;
      if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myHeight = window.innerHeight;
      } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myHeight = document.documentElement.clientHeight;
      } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myHeight = document.body.clientHeight;
      }
    return myHeight;
  }

  </af:resource>
</af:document>
</f:view>
</jsp:root>

Try to put some more components on the panelGrouplayout inside the panelBorderLayout to see what happens when the center area exeeds the browser height.