touch screen device, no scrolling possible with overflow:auto & fixed height

I've built a theme, making it to use 100% height of the page.

The basic of the layout is the following: div#container contains 3 divs, header, footer, content. All positioned absolute to #container, 14% height header, 6% height footer, the rest is for content. All divs, except content has overflow:hidden, content has overflow:auto.

It works fine the most of the desktop browsers (FF3.6+, IE 8+, Opera 10.5+, Chrome act开发者_StackOverflowual). On a touch screen device, it show everything nice, but I have no scrollbar, nor scrolling possibility on #content.

The test page: http://pearlofdanube.hu

Tested with Android 2.2 built-in browser and Opera Mobile, some reported it's the same with iPhone.

Does anyone have any idea of correct workaround, without basic changes in the layout? The costumer really want to have same layout any kind of device.

iSCroll may be of some help to you. You should set the wrapper around all of your content to the size you would like the scroller to be. Then:

function loaded() {
    document.addEventListener('touchmove', function(e){ e.preventDefault(); });
    myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded);

'scroller' is the mandatory id that will be changed to the id of the element that you want to scroll. Hope this helps.

Here is a demo that you may want to take a look at http://cubiq.org/dropbox/iscroll4/examples/simple/