How to make Sidr (jQuery plugin) go in-between fixed header and footer?

Question

Anyone know how I can get Sidr to come in between a fixed header and footer?

The CSS for my header and footer are basically this:

.header {
position: fixed;
width: 100%;
height: 100px;
background: #bada55;
top: 0;
}

.footer {
position: fixed;
width: 100%;
height: 100px;
background: #bada55;
bottom: 0;
}

Currently when Sidr is toggled, it will push the header and footer along with the body content.

EDIT: fiddle added: jsfiddle.net/Lnpxx6me