Moving the head end, the middle, the bottom of the navigation layout

In the project, we will have such a demand:

Head composed of a middle portion of the bottom

To scroll effect intermediate portion (or may be better-scroll in the cube-ui scroll)

The main trouble is at the bottom

Solution: 100% intermediate portion of the height of the bottom fixed disposed outermost layer high flex layout flex-direction: column