0

このコードは、Firefox と Chrome で意図したとおりにレンダリングされます。IE11 ではまったく正しくレンダリングされません。ページの上部全体に 100 ピクセルの高さの灰色の領域があるはずです。両側に 200 ピクセル幅の 2 つの灰色の領域があり、上部の灰色の領域のすぐ下のウィンドウの高さになります。中央にスクロールバーのある白い領域があるはずです。ここで同様の質問に示されている提案はどれも機能していません。これを 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>
4

0 に答える 0