This code renders exactly as I intend it to in Firefox and Chrome. It doesn't render properly at all in IE11. There should be a gray area all the way across the top of the page 100 pixels high. There should be two gray areas on either side 200 pixels wide running the height of the window just below the gray area on top. And there should be a white area with a scroll bar in the middle. None of the suggestions given in similar questions on here have worked. How do I make this work in IE?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body { height:100%; margin: 0; }
</style>
</head>
<body style="margin: 0;">
<form id="MasterForm">
<div>
<div style="position: absolute; width: 100%; height: 100px; border-width: 0px; background: Gray; z-index: 2147483647;">
asdf
</div>
<div style="position: absolute; width: 200px; height: calc(100vh - 100px); left: 0px; top: 100px; border-width: 0px; background-color: Gray;">
asdf
</div>
<div style="position: absolute; width: calc(100% - 400px - 4px); height: calc(100% - 100px - 4px); left: 200px; top: 100px; border-style: inset; border-width: 2px; overflow-y: scroll;">
<h1>CONTENT</h1>
</div>
<div style="position: absolute; width: 200px; height: calc(100vh - 100px); right: 0px; top: 100px; border-width: 0px; background-color: Gray;">
asdf
</div>
</div>
</form>
</body>
</html>
