• The overall layout has a fixed height and width of 100%, and should fit to the viewport.
• The top and bottom strips should appear at the top and bottom of the viewport.
• The middle area has overflow:auto and should scroll if the content is too long, leaving the overall layout as-is.
• Instead, the 100% height is being ignored, and the extra content in the middle areas is stretching out the overall layout, causing the whole page to scroll.
• If the extra content is removed the layout fits the viewport correctly, see http://jsbin.com/abacit.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.