Grid-frame and scrolling

I have broken down my main issue with Foundation’s grid-y and grid-frame.
If I have this:
See https://codepen.io/kickbk/pen/poJZGzx

I indeed can scroll the body independently, but that is not necessarily a good thing. As soon as you have content that is scrollable in that div, the scrollbar will appear on the right of that div only. Content in the body div will then get out of alignment with the header and footer and the scroll bar will be noticeable.

Do you have a suggestion how to achieve this top stuck header, scrollable body, and bottom stuck footer while keeping the scrollbar outside of the main body div?