famous angular header-footer-layout.html

header-footer-layout.html

<fa-app style="height: 568px; width: 320px; margin: 0;">
  <fa-surface fa-background-color="'#FFF'"></fa-surface>
  <fa-header-footer-layout>
    <fa-surface fa-size="[undefined, 100]" fa-background-color="'#F00'">Header</fa-surface>
	    <fa-scroll-view a-size="[undefined, undefined]" fa-pipe-from="eventHandler" fa-options="options.scrollViewInner">
	      <fa-surface fa-pipe-to="eventHandler"
	                  fa-background-color="'#FFF'"
	                  fa-color="'#777'">      
	        hello 1 yo
	      </fa-surface>
	      <fa-surface fa-pipe-to="eventHandler"
	                  fa-background-color="'#FFF'"
	                  fa-color="'#777'">      
	        hello 2
	      </fa-surface>
	      <fa-surface fa-pipe-to="eventHandler"
	                  fa-background-color="'#FFF'"
	                  fa-color="'#777'">      
	        hello 3
	      </fa-surface>  
	    </fa-scroll-view>
    <fa-surface fa-size="[undefined, 50]" fa-background-color="'#00F'">Footer</fa-surface>
  </fa-header-footer-layout>
</fa-app>

Hi gregmercer, I tried your code, but I can't make the page have the scroll working. In my case I need the scrollview with 100% of the height of the page. This work for you?