Keep main content scrollable but not the body
You can use flexbox. This works in all modern browsers, and will also make it responsive.

.wrapper {
  /* Makes the wrapper fill the entire screen */
  position: fixed;
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
  /* The important bit */
  display: flex;
  flex-direction: column;
}

.main {
  /* Makes the main content take up the remaining space */
  flex: 1;
  overflow-y: scroll;
}

.header, .footer {
  height: 50px;
}


JSFiddle