Jquery – iScroll with footer and header fixed

If you enter http://gizeto.se/app_yellow/index.html you can see that iScroll scrolls the entire page. You can see the scroller lying over both the header and the footer. The scroller should only scroll the content, not the header and footer included.

I wan't to make this work because I need the fixed footer without using position:fixed – which still doesn't work on for example Android 2.1

I use iScroll 4 and my JS code is inside my data-role="content" div:

            $(document).ready(function() {

                var myScroll = new iScroll('content');
                $(window).bind('resize', function () {
                // I also tried setting a height on the content div, but that didn't work either. Its commented out.
                //$.mobile.activePage.children('[data-role="content"]').height('200px');

                    myScroll.refresh();

                });
            });

My data-role="page" element has the data-iscroll="enable" attribute, and my html code for the scrolling part is:

    <div data-iscroll="scroller" class="scroller">
        <div data-iscroll="scroller">
        <h3>Välkommen</h3>

        <div style="text-align:center;">
        <img src="images/video.png" style="width: 100%; height: 100px;" class="rounded" title="" />
        </div>
        <br />

            Ticker AB är en arkitekturbyrå som arbetar inom ett brett fält av projekt, från stadsplanering till bostäder via kontor och handel. Vår styrka ligger i våra idéer och vår förmåga att hitta nya, ofta oväntade lösningar som stärker platser och ökar fastigheters värde.      <br /><br />
            Vi följer den globala utvecklingen inom hållbar samhällsutveckling och arbetar aktivt för att integrera hållbara lösningar i alla våra projekt.


        </div>
    </div>

Why does iScroll scroll the hole page and not just the content so that my footer can stay totally fixed without the use of position:fixed which isn't supported in all mobile browsers just yet.