How can I make a scrollable div below a fixed header without confusing mobile Safari?

Question

Fixed header at top. Scrollable div below. This question gets asked a lot:

• Header div stays at top, vertical scrolling div below with scrollbar only attached to that div
• fixed header div with scrollable div below
• How can I have a scrollable body with fixed header and footer inside a container div?

But I need to find a solution that doesn't wreck mobile Safari.

There are two problems with the accepted solutions to the questions listed above. One is that inertial scrolling within the scrollable div doesn't work. The second is that you might get the rubber band effect when you try to scroll up (swipe down) at the bottom of the scrollable div. Mobile Safari is apparently confused about whether to interpret the swipe as an attempt to scroll the div or the html document.