Этот код отображается точно так, как я предполагал, в Firefox и Chrome. Он вообще не отображается должным образом в IE11. В верхней части страницы должна быть серая область высотой 100 пикселей. С каждой стороны должны быть две серые области шириной 200 пикселей, расположенные по высоте окна чуть ниже серой области сверху. И должна быть белая область с полосой прокрутки посередине. Ни одно из предложений, данных в подобных вопросах здесь, не сработало. Как заставить это работать в 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>
