How to keep panel height fixed with scroll if content overflow for JQuery Mobile

Question

I have a page with fixed header and a fixed footer. The height of the content is also fixed to the height of the window.

The document has a panel whose content may grow longer than the height of window/content. When that happens the height of the document gets changed. But I need to keep the height of the document fixed without scrollbars. The panel should get the scrollbar instead.

Example: http://jsfiddle.net/moizhb/GSSD3/

Here is how panel is instantiated:

<div data-role="panel" id="navpanel" data-theme="a" data-display="overlay"></div>

I'd appreciate any directions here.

Thank you!

Answer 1

Here is you fiddle updated: http://jsfiddle.net/ezanker/GSSD3/1/

Just added some CSS to absolutely position and size the panel's inner div and to allow scrolling:

.ui-panel .ui-panel-inner {
    overflow: auto;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;  
    -webkit-overflow-scrolling: touch;
}

You will need to test this for the devices you are supporting as I am not sure if it will work on all of them...