Keep main content scrollable but not the body For a template such as:



I'm using the following approach


Get the height of the viewport via javascript (Let's say 500px)
Deduct the header and footer height from it (Let's say header and footer are 50px each. So the end result will be 400px)
Apply the end result as height of the main content div via javascript
Use overflow-y:scroll property on the main content div via CSS


This works as expected but I was hoping there might be a better way to achieve the same. I'm thinking only via CSS, if possible.

The code I'm using is:

&lt;!-- javascript --&gt;
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var to_apply_height = height - 50 -50; // header and footer height
document.getElementById('main_content').style.height = to_apply_height+'px';

&lt;!-- css --&gt;
#main_content{
overflow-y:scroll;
}
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